Se um usuário acessa o site usando um smartphone, o site provavelmente irá exibir apenas o conteúdo essencial, deixando invisível boa parte do HTML.
Agora, por que devemos renderizar as áreas que não são visíveis? Evitando a renderização de áreas que sabemos estarem ocultas podemos melhorar o desempenho e economizar bateria dos dispositivos.
Ember Responsive Area
Para o Ember.js criei um componente bastante simples que resolve esse problema. Toda a área dentro do componente será renderizada apenas se estiver visível. O componente se chama Ember Responsive Area.O uso dele é bastante simples:
<div class="hidden-phone">
{{#responsive-area}}
Aqui vem o conteúdo.
{{/responsive-area}}
</div>
Como funciona
Quando o componente é carregado, ele verifica se o elemento está visível. Se estiver visível, renderiza a área. Caso contrário, não renderiza e monitora o redimensionamento do navegador.Se o usuário redimensionar o navegador ou girar o dispositivo (tablet/smartphone) o componente irá verificar novamente se deve renderizar a área.
Note que isso só funciona se a visibilidade da região depende do tamanho da janela do navegador, isso não funcionará se você está ocultando e exibindo manualmente a área.