 <p>Use CSS <a href="https://developer.mozilla.org/en/docs/CSS/Media_queries" rel="nofollow">media queries</a> as follows. In your handlebars template:</p> <pre><code>&lt;div class="show-ipad"&gt; {{outlet "ipad-outlet1"}} {{outlet "ipad-outlet2"}} &lt;/div&gt; &lt;div class="show-iphone"&gt; {{outlet "iphone-outlet1"}} {{outlet "iphone-outlet2"}} &lt;/div&gt; </code></pre> <p>In your stylesheet (media-queries taken from <a href="http://css-tricks.com/snippets/css/media-queries-for-standard-devices/" rel="nofollow">this article)</a>:</p> <pre><code>/* 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; } } </code></pre> <p>Adapt the media-queries to your needs (targeting iPads in landscape, in portrait, etc.). </p> <p>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.</p>