Todas essas respostas listadas acima, que usam max-device-width
ou max-device-height
para consultas de mídia, sofrem de bugs muito fortes: elas também têm como alvo muitos outros dispositivos móveis populares (provavelmente indesejados e nunca testados, ou que chegarão ao mercado no futuro).
Essas consultas funcionarão para qualquer dispositivo que tenha uma tela menor e provavelmente seu design será interrompido.
Combinada com consultas de mídia específicas para dispositivos semelhantes (para HTC, Samsung, IPod, Nexus ...), esta prática lançará uma bomba-relógio. Para debigging, essa idéia pode tornar seu CSS um spagetti não controlado. Você nunca pode testar todos os dispositivos possíveis.
Esteja ciente de que a única consulta de mídia sempre visando o IPhone5 e nada mais é:
/* iPhone 5 Retina regardless of IOS version */
@media (device-height : 568px)
and (device-width : 320px)
and (-webkit-min-device-pixel-ratio: 2)
/* and (orientation : todo: you can add orientation or delete this comment)*/ {
/*IPhone 5 only CSS here*/
}
Observe que a largura e a altura exatas, e não a largura máxima, estão marcadas aqui.
Agora, qual é a solução? Se você deseja escrever uma página da Web com boa aparência em todos os dispositivos possíveis, a melhor prática é usar a degradação
/ * padrão de degradação, estamos verificando a largura da tela com certeza, isso mudará está mudando de retrato para paisagem * /
/*css for desktops here*/
@media (max-device-width: 1024px) {
/*IPad portrait AND netbooks, AND anything with smaller screen*/
/*make the design flexible if possible */
/*Structure your code thinking about all devices that go below*/
}
@media (max-device-width: 640px) {
/*Iphone portrait and smaller*/
}
@media (max-device-width: 540px) {
/*Smaller and smaller...*/
}
@media (max-device-width: 320px) {
/*IPhone portrait and smaller. You can probably stop on 320px*/
}
Se mais de 30% dos visitantes do seu site vierem de dispositivos móveis, vire esse esquema de cabeça para baixo, fornecendo uma abordagem para dispositivos móveis. Use min-device-width
nesse caso. Isso acelerará a renderização de páginas da Web para navegadores móveis.