【问题标题】:Ionic 2 large screen resolution appsIonic 2 大屏分辨率应用
【发布时间】:2017-01-14 20:45:54
【问题描述】:

我想制作一个网络应用程序,像 ionic 的管理员应用程序,适合大分辨率的显示器屏幕,但 ionic 主要是为移动应用程序设计的,我该如何布局我的应用程序以便将来我可以删除一些列并使其也适合移动应用分辨率。

有没有办法检查分辨率大小并据此决定显示或隐藏某些内容。

迈克

【问题讨论】:

    标签: css layout angular ionic2


    【解决方案1】:

    您可以通过使用平台信息来决定布局的显示方式:

    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.
    

    如果应用显示在桌面(核心)或平板电脑(ipad 或平板电脑)等等,通过使用底层平台信息,您可以调整布局:

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

    然后通过使用 *ngIf、showWhen、动态设置 Grid Column Percentage Attributes 或您在视图中需要的任何内容来设计适当的布局。

    请注意,使用平台信息不仅在视图中很重要,在组件代码中也很重要。这样,您可以避免初始化或执行稍后不会在视图中显示的代码(例如,如果您不打算加载只应在桌面上显示的地图,那么加载地图是没有意义的在视图中显示它,因为该应用程序正在移动设备中使用)。

    【讨论】:

    • 感谢回复,很有帮助
    • 很高兴我能帮上忙 :)
    • @sebaferreras 我无法验证在真正的 Ipad 上是否是这种情况,但在 Chrome 模拟器中,Ipad 已经被视为 Ionic2 的tablet。所以看来你的|| 不是必需的;)。
    猜你喜欢
    • 2020-02-25
    • 2017-02-11
    • 2018-10-08
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多