CODEWITHSUNDEEP
cssember.jsmedia-queries
Wang Fengfeng
Wang Fengfeng

Reputation: 1

how to using ember.js to develop multiply platform app

I want to realize multiply platform using ember.js.For iPhone,smart phones the designs are the same,while the iPad design and resolution are not the same. For phones,it will contain headerbar and appBody outlet

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

"<nav class='nav'>"+

While for the iPad,it will contain the below iPad application templates

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

Therefore, how can I define my AppRoute to render the different outlet once the CSS recognize the devices. In the above case,I thought I can reuse the topHeaderBar and the appBody for the leftPanel and rightPanel. But the question is how can I render to different templates in my AppRoute? Kindly give suggestions. Thank u!

Upvotes: 0

Views: 683

Answers (1)

Panagiotis Panagi
Panagiotis Panagi

Reputation: 10087

Use CSS media queries as follows. In your handlebars template:

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

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

In your stylesheet (media-queries taken from 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;
  }
}

Adapt the media-queries to your needs (targeting iPads in landscape, in portrait, etc.).

In Javascript don't assume anything about the client device. Just render all outlets for all devices, and let the CSS media-query handle what is shown and what is hidden.

Upvotes: 2

Related Questions