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

Question

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

我正在寻找可以让我在平板电脑上以一种方式显示视图，而在 phone 上以另一种方式显示视图的东西。在这个特定的例子中，我有一份工作清单。如果是平板电脑，我还想在列表右侧显示地图并将其绘制出来。我理解如何制作地图，但我如何分辨他们使用的是什么并显示正确的 UI?

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 属性结合使用。

The showWhen attribute takes a string that represents a platform or screen orientation. The element the attribute is added to will only be shown when that platform or screen orientation is active.

此方法封装了平台 class 逻辑，这意味着您无需在 Page.ts 文件中执行任何操作，您唯一需要担心的代码将在 HTML.

例子

如果您希望某些代码仅在平板电脑屏幕上可见

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

也选择 ShowWhen documentation for more information. They also offer a HideWhen 属性。

备注

如以下评论所述

showWhen 方法将仅应用 display: none; 属性到元素，这意味着您的 HTML 仍将被渲染无论设备类型如何。
如果您采用 *ngIf 方法，它只会加载 HTML 内容如果符合规则。

性能方面 *ngIf 对您来说可能是更好的选择，但在其他情况下 showWhen 可能更有利（我试图为其他读者保留这个通用性）。

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

Possible to change layout for phone and tablets using Ionic 2?

typescript

ionic-framework

ionic2

ionic3

angular