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 回答