largura versus largura do dispositivo
Em meios CSS a diferença entre width e device-width pode ser um pouco confusa, por isso vamos expor um pouco sobre isso. device-width refere-se à largura do próprio dispositivo, por outras palavras, à resolução do ecrã do dispositivo. Digamos que a resolução do seu ecrã é de 1440 x 900. Isto significa que o ecrã tem 1440 pixels de largura, por isso tem um device-width de 1440px. A maioria dos telemóveis tem uma largura de dispositivo de 480px ou inferior, incluindo o popular iPhone 4 (com largura de dispositivo: 320px), apesar de tecnicamente ter uma resolução de 640 x 960. Isto deve-se ao ecrã retina do iPhone 4, que enfia dois pixels do dispositivo em cada pixel CSS no ecrã. Isto também é verdade para o Ipad 3; o seu relatório device-width é de 768px tal como os seus predecessores, embora a sua resolução real do ecrã seja de 1536px x 2048px. Em geral width é mais versátil quando se trata de criar páginas web reactivas, embora device-width seja útil quando se pretende visar especificamente os dispositivos móveis (e não os computadores de secretária com uma pequena janela de navegador, por exemplo), uma vez que raramente os computadores de secretária têm resoluções de ecrã abaixo de um certo número, tais como 320px x 480px.
Aqui abaixo mostra a resolução de ecrã e as dimensões dos dispositivos CSS media de alguns dos dispositivos mais populares por aí:
| Device | resolução (px) | device-width/ device-height (px) |
|---|---|---|
| iPhone | 320 x 480 | 320 x 480, tanto no modo retrato como no modo paisagem |
| iPhone 4 | 640 x 960 | 320 x 480, tanto no modo retrato como no modo paisagem. device-pixel-ratio é 2 |
| iPhone 5, 5s | 640 x 1136 | 320 x 568, tanto no modo retrato como no modo paisagem. device-pixel-ratio é 2 |
| iPhone 6 | 750 x 1334 | 375 x 667, tanto no modo retrato como no modo paisagem. device-pixel-ratio é 2 |
| iPhone 6 plus | 1242 x 2208 | 414 x 736, tanto no modo retrato como no modo paisagem. device-pixel-ratio é 3 |
| iPad 1 e 2 | 768 x 1024 | 768 x 1024, tanto no modo retrato como no modo paisagem |
| iPad 3 | 1536 x 2048 | 768 x 1024, tanto no modo retrato como no modo paisagem
CSS a densidade de pixels é 2 |
| Samsung Galaxy S I e II | 480 x 800 | 320 x 533, em modo retrato
CSS a densidade de píxeis é 1.5 |
| Samsung Galaxy S III | 720 x 1280 | 360? x 640?, em modo retrato |
| HTC Evo 3D | 540 x 960 | 360 x 640, modo retrato
densidade de píxeis CSS é 1.5 |
| Amazon Kindle Fire | 1024 x 600 | 1024 x 600, modo paisagem |
Só para complicar ainda mais as coisas, em dispositivos iPhone e iPad, a largura do dispositivo corresponde sempre à largura do dispositivo em modo retrato, independentemente de o dispositivo se encontrar nesse modo ou paisagem. Com outros dispositivos, a largura do dispositivo muda em função da sua orientação.
* Para uma lista mais completa de dispositivos e as suas resoluções de ecrã, visite esta página.
p>Vejamos agora mais algumas consultas de meios CSS que capturam diferentes dispositivos e dimensões de ecrã:
/* #### Mobile Phones Portrait #### */
@media screen and (max-device-width: 480px) and (orientation: portrait){
/* some CSS here */
}
/* #### Mobile Phones Landscape #### */
@media screen and (max-device-width: 480px) and (max-device-width: 640px) e (orientação: paisagem){
/* algum CSS aqui */
}
/* #### Mobile Phones Portrait or Landscape #### */
@media screen and (max-device-width: 640px){
/* algum CSS aqui */
}
/* #### iPhone 4+ Portrait or Landscape #### */
@media screen and (min-device-width: 320px) and (-webkit-min-device-pixel-ratio: 2){
/* algum CSS aqui */
}
/* #### iPhone 5 Portrait or Landscape #### */
@media (altura do dispositivo: 568px) e (largura do dispositivo: 320px) e (-webkit-min-device-pixel-ratio: 2){
/* algum CSS aqui */
}
/* #### iPhone 6 e 6 plus Portrait or Landscape #### */
@media (min-device-height: 667px) e (min-device-webkit-min-device-pixel-ratio: 375px) e (-webkit-min-device-pixel-ratio: 320px: 3){
/* algum CSS aqui */
}
/* #### Tablets Portrait or Landscape #### */
@media screen and (min-device-width: 768px) and (max-device-width: 768px) and (max-device-width: 667px) 1024px){
/* algum CSS aqui */
}
/* #### Desktops #### */
@ ecrã CSS e (largura mínima: 1024px){
/* algum CSS aqui */
}
Por isso, temos agora uma ideia bastante boa sobre a utilização de consultas de meios CSS. Contudo, há outra peça importante do puzzle de que precisamos para que tudo funcione como esperado, e que é o viewport meta tag.
- Introduction to CSS media queries
- largura versus largura do dispositivo
- The viewport meta tag- a chave para preparar uma página para optimização de dispositivos móveis
- CSS media query matching in JavaScript using window.matchMedia()
A meta tag do viewport – a chave para preparar uma página para optimização de dispositivos móveis 