anchura frente a anchura del dispositivo
En los medios CSS la diferencia entre width y device-width puede ser un poco confusa, así que vamos a explicarla un poco. device-width se refiere a la anchura del propio dispositivo, es decir, a la resolución de la pantalla del dispositivo. Digamos que la resolución de tu pantalla es de 1440 x 900. Esto significa que la pantalla tiene 1440 píxeles de ancho, por lo que tiene un device-width de 1440px. La mayoría de los teléfonos móviles tienen una anchura de dispositivo de 480px o inferior, incluido el popular iPhone 4 (con una anchura de dispositivo de 320px), a pesar de que técnicamente tiene una resolución de 640 x 960. Esto se debe a la pantalla retina del iPhone 4, que mete dos píxeles de dispositivo en cada píxel CSS de la pantalla. Esto es cierto para el Ipad 3 también; su device-width reportado es de 768px al igual que sus predecesores, a pesar de que su resolución de pantalla real es de 1536px x 2048px. En general width es más versátil a la hora de crear páginas web responsivas, aunque device-width es útil cuando se desea orientar específicamente a los dispositivos móviles (y no a los ordenadores de sobremesa con una ventana pequeña del navegador, por ejemplo), ya que rara vez los ordenadores de sobremesa tienen resoluciones de pantalla por debajo de un determinado número como 320px x 480px.
A continuación se muestra la resolución de pantalla y las dimensiones del dispositivo de medios CSS de algunos de los dispositivos más populares que existen:
| Dispositivo | resolución (px) | dispositivo-width/ device-height (px) |
|---|---|---|
| iPhone | 320 x 480 | 320 x 480, tanto en modo vertical como horizontal | iPhone 4 | 640 x 960 | 320 x 480, tanto en modo vertical como horizontal. device-pixel-ratio es 2 |
| iPhone 5, 5s | 640 x 1136 | 320 x 568, tanto en modo vertical como horizontal. device-pixel-ratio es 2 |
| iPhone 6 | 750 x 1334 | 375 x 667, tanto en modo vertical como horizontal. device-pixel-ratio es 2 |
| iPhone 6 plus | 1242 x 2208 | 414 x 736, tanto en modo vertical como horizontal. device-pixel-ratio es 3 |
| iPad 1 y 2 | 768 x 1024 | 768 x 1024, tanto en modo vertical como horizontal | iPad 3 | 1536 x 2048 | 768 x 1024, tanto en modo retrato como en modo paisaje
La densidad de píxeles en CSS es de 2 |
| Samsung Galaxy S I y II | 480 x 800 | 320 x 533, en modo retrato
La densidad de píxeles de CSS es de 1.5 |
| Samsung Galaxy S III | 720 x 1280 | 360? x 640?, en modo retrato | HTC Evo 3D | 540 x 960 | 360 x 640, modo retrato
La densidad de píxeles del CSS es de 1.5 |
| Amazon Kindle Fire | 1024 x 600 | 1024 x 600, modo apaisado |
Sólo para complicar aún más las cosas, en los dispositivos iPhone y iPad, el device-width siempre corresponde a la anchura del dispositivo en modo vertical, independientemente de si el dispositivo está en ese modo o en el horizontal. En el resto de dispositivos, su device-width cambia en función de su orientación.
* Para una lista más completa de dispositivos y sus resoluciones de pantalla, visite esta página.
Veamos ahora algunas consultas de medios CSS más que capturan diferentes dispositivos y dimensiones de pantalla:
/* #### 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: 640px) and (orientation: landscape){
/* some CSS here */
}
/* #### Mobile Phones Portrait or Landscape #### */
@media screen and (max-device-width: 640px){
/* algo de CSS aquí */
}
/* #### iPhone 4+ Portrait or Landscape #### */
@media screen and (min-device-width: 320px) and (-webkit-min-device-pixel-ratio: 2){
/* algo de CSS aquí */
}
/* #### iPhone 5 Portrait or Landscape #### */
@media (device-height: 568px) and (device-width: 320px) and (-webkit-min-device-pixel-ratio: 2){
/* algo de CSS aquí */
}
/* #### iPhone 6 y 6 plus Portrait or Landscape #### */
@media (min-device-height: 667px) and (min-device-width: 375px) and (-webkit-min-device-pixel-ratio: 3){
/* algo de CSS aquí */
}
/* #### Tablets Portrait or Landscape #### */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px){
/* algo de CSS aquí */
}
/* #### Ordenadores de sobremesa #### */
@media screen and (min-width: 1024px){
/* algo de CSS aquí */
}
Así que ahora tenemos una idea bastante buena sobre el uso de CSS media queries. Sin embargo, hay otra pieza importante del rompecabezas que necesitamos para que todo funcione como se espera, y es la etiqueta viewport meta.
- Introducción a las consultas de medios CSS
- Ancho frente a ancho de dispositivo
- La etiqueta meta viewport- la clave para preparar una página para la optimización de dispositivos móviles
- Comparación de consultas de medios CSS en JavaScript usando window.matchMedia()
La etiqueta meta viewport- la clave para preparar una página para la optimización de dispositivos móviles 