使用Ionic 2可以更改手机和平板电脑的布局吗？

Question

我看到Ionic 2有一个响应式网格系统，但似乎只是让您创建网格样式布局。

我正在寻找的东西，可以让我在平板电脑上显示一种方式，另一种方式在手机上显示。在这个特定的例子中，我有一份工作清单。如果是平板电脑，我还想在列表右侧显示一张地图并绘制出来。如何制作我理解的地图，但如何告诉他们正在使用的地图并显示正确的用户界面？

Answer 1

你可以决定的布局将如何使用platform information显示：

Platform Name Description 
android on a device running Android. 
cordova on a device running Cordova. 
core on a desktop device. 
ios on a device running iOS. 
ipad on an iPad device. 
iphone on an iPhone device. 
mobile on a mobile device. 
mobileweb in a browser on a mobile device. 
phablet on a phablet device. 
tablet on a tablet device. 
windows on a device running Windows. 

使用基础platform信息，您可以设置显示或如果通过只是一个tablet（或ipad）隐藏的东西简单地做：

this.isTabletOrIpad = this.platform.is('tablet') || this.platform.is('ipad'); 

，然后使用*ngIf或者你在你的意见需要，或者使用isTabletOrIpad属性来决定是否要初始化地图Ø不是。

Answer 2

与@sebaferreras类似，您可以使用Platform Name中列出的名称，但我会建议将它与showWhen属性一起使用。

showWhen属性需要一个字符串，该字符串表示平台或 屏幕方向。当该平台或屏幕方向处于活动状态时，该属性添加到的元素将仅显示 。

这种方法封装了Platform类的逻辑，这意味着你不需要在Page.ts文件中做任何事情，唯一需要担心的代码将在HTML中。

例

如果您希望某些代码，只能是平板电脑屏幕

<div showWhen="tablet"> 
    All content inside here will be visible on tablet devices 
</div> 

硒的ShowWhen文档的详细信息可见。他们也提供HideWhen属性。

注意

正如在评论下方

• 提到的showWhen方法将只是display: none;财产 申请，这意味着你的HTML仍然会呈现 不管类型的元素设备。
• 如果你采取*ngIf的方法，它将只会加载HTML内容 ，如果它符合规则。

性能明智*ngIf可能是你更好的选择，但在其他情况下showWhen可能是更有利的（我想保持这种通用的其他读者）。