css - 如何使用 ember.js 开发多平台应用

Question

我想用ember.js实现多平台。对于iPhone，智能手机的设计是一样的，而iPad的设计和分辨率是不一样的。对于手机，它将包含 headerbar 和 appBody outlet

    "<div class='wrapper'>" +
    "{{outlet topHeaderBar}}" +
    "{{outlet appBody}}" +

"<nav class='nav'>"+

而对于 iPad，它将包含以下 iPad 应用程序模板

 "<div class='wrapper'>"+
    "<nav class='nav'>"+
    "{{outlet leftPanel}}" +
    "{{outlet rightPanel}}" +

因此，一旦 CSS 识别出设备，我如何定义我的 AppRoute 以呈现不同的 socket 。在上面的例子中，我认为我可以为 leftPanel 和 rightPanel 重用 topHeaderBar 和 appBody。但问题是如何在我的 AppRoute 中呈现不同的模板？请提出建议。谢谢!

Answer 1

使用 CSS media queries如下。在您的 Handlebars 模板中:

<div class="show-ipad">
  {{outlet "ipad-outlet1"}}
  {{outlet "ipad-outlet2"}}
</div> 

<div class="show-iphone">
  {{outlet "iphone-outlet1"}}
  {{outlet "iphone-outlet2"}}
</div> 

在你的样式表中(媒体查询取自 this article) :

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
  .show-iphone {
    display: none;
  }
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
  .show-ipad {
    display: none;
  }
}

根据您的需要调整媒体查询(针对横向、纵向等方向的 iPad)。

在 Javascript 中，不要对客户端设备做任何假设。只需渲染所有设备的所有 socket ，让 CSS 媒体查询处理显示的内容和隐藏的内容。