0

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

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

"<nav class='nav'>"+

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

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

因此，一旦 CSS 识别设备，我如何定义我的 AppRoute 以呈现不同的插座。 在上述情况下，我认为我可以为 leftPanel 和 rightPanel 重用 topHeaderBar 和 appBody。但问题是如何在我的 AppRoute 中渲染到不同的模板？ 请提出建议。感谢你！

4

1 回答 1

2

使用 CSS媒体查询如下。在您的车把模板中：

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

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

在您的样式表中（取自本文的媒体查询）：

/* 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 中，不要假设关于客户端设备的任何事情。只需渲染所有设备的所有插座，让 CSS 媒体查询处理显示的内容和隐藏的内容。

于 2013-04-08T07:30:00.833 回答