Medidas estándar de pantallas para tus media queries

  • Por
Listado de pantallas y viewports comunes de dispositivos y ordenadores de escritorio para hacernos una idea de hacia dónde podrían apuntar nuestras media queries CSS.

He pensado bastante antes de redactar este artículo, analizando hasta qué punto debería o no escribirlo. Como sabemos, los breakpoints de un diseño Responsive Web Design para crear tus MediaQueries no deben orientarse a tamaños de pantalla estándar, sino debe ser algo específico para tu propio diseño web. Sin embargo, muchas personas quieren saber, al menos a modo orientativo, qué medidas de pantallas habituales se pueden encontrar en los dispositivos.

Lo que no quiero que se piense es que este punto contradice todo lo dicho anteriormente en el Manual de Responsive Web Design. Por eso es bueno insistir que estas medidas son solamente a modo orientativo, para aquellas personas que tienen curiosidad sobre las dimensiones de los dispositivos "estándar".

Recordando que cualquier colección de medidas para media queries está siempre desactualizada e incompleta, porque es imposible albergar todas y cada una de las medidas de pantalla que hay en el mercado de ordenadores y dispositivos y además, cuando se publique o lea este texto, quizás ya hayan aparecido nuevos dispositivos con dimensiones diferentes a las que se mencionan. Así que toma estas medidas de viewport como una referencia únicamente orientativa y sobre todo parcial. Entiende además que no pretendemos que diseñes para ninguna de estas dimensiones, puesto que sería un error.

Nota: Muy importante, lo que se muestra a continuación es el tamaño del Viewport. Las medidas en centímetros o pulgadas de la pantalla no tienen que ver con las medidas que el teléfono tiene en píxeles. Pero además, el móvil puede tener una resolución en píxeles diferente que su viewport, porque muchos móviles usan varios píxeles de pantalla para representar un píxel de imagen, debido a su "device pixel ratio" o el ratio de pixels que el dispositivo usa para mostrar un pixel de computable en medidas de viewport. Por ejemplo, la pantalla del Nexus 5 es Full HD, lo que implica una resolución de 1080 x 1920 pixels. Sin embargo, al mostrar una página web el Nexus 5 tiene un viewport de 360 x 598. Todo esto es un poco de lío, pero es porque las densidades en píxles de las pantallas ahora son mayores y para representar un píxel usan varios puntos.

Medidas de teléfonos móviles

La gama iPhone tiene medidas que son factibles de recopilar, puesto que los modelos que han aparecido en el mercado son limitados. Sin embargo, la gama Android debe tener decenas de miles de tipos de pantallas distintas, por lo que simplemente podemos hacer un resumen de modelos más típicos.

iPhone 4 y 4S: 320 x 480
iPhone 5 y 5S: 320 x 568
iPhone 6: 375 x 667
iPhone 6+: 414 x 736
Nexus 4: 384 x 598
Nexus 5: 360 x 598
Galaxy S3, S4, S5: 360 x 640
HTC One: 360 x 640

Medidas de tablets

Pasa un poco lo mismo, podemos indicar medidas de viewport para los tablets de Apple, pero es imposible dar todas las medidas que encontrarás en un Android. Recuerda que, así como los móviles, puedes situar la pantalla en vertical u horizontal, así que es un poco lo mismo que digamos que un iPad tiene unas dimensiones de 768 x 1024 o de 1024 x 768.

Además, por la densidad de píxeles de las pantallas, aunque iPad 1, 2, 3 y 4, incluso el iPad Mini, tengan el mismo viewport, los píxeles de resolución de sus pantallas son diferentes, lo que cambia es el pixel aspect ratio. En este caso concreto, los iPad Mini y los iPad 1 y 2 tienen un device-pixel-ratio de 1 mientras que iPad 3 en adelante tiene un device-pixel-ratio de 2.

iPad todos los modelos, así como iPad Mini: 1024 x 768
Galaxy Tab 2 y 3 (7.0 pulgadas): 600 x 1024
Galaxy Tab 2 y 3 (10.1 pulgadas): 800 x 1280
Nexus 7: 603 x 966
Nexus 10: 800 x 1280
Microsoft Surface W8 RT: 768 x 1366
Microsoft Surface W8 Pro: 720 x 1280

Ordenadores de escritorio

En el caso de los ordenadores de escritorio contamos con las resoluciones de pantalla típicas de toda la vida, aunque también entra en juego recientemente la densidad de píxeles que aumenta en ordenadores modernos, como las pantallas Retina en los Mac.

Pantallas pequeñas (usadas por ejemplo en netbooks): 1024 x 600
Pantallas medianas: 1280 x 720 / 1280 x 800
Pantallas grandes: ancho superior a 1400 píxeles, ejemplo 1400 x 900 o 1600 x 1200.

Relojes

Aquí ya la cosa se pone complicada, puesto que el viewport es muy reducido, por lo que la experiencia de usuario debe ajustarse mucho, pero eso es otro tema.

Apple Watch: 42mm de anchura de pantalla, viewport de 256px (calculado en relación al tamaño de pantalla del iPhone)
360 Moto Watch: 218 x 281

Conclusión

De momento eso es todo. No quiero acabar sin volver a insistir en que esta recopilación no pretende ser completa, ya que las Medidas estándar para breakpoints no existen, pues depende del diseño de tu página.

Hay dos referencias que me parecen muy útiles y que he utilizado como documentación para construir este listado. Por una parte el sitio web Viewport Sizes, que tiene una estupenda referencia de una cantidad enorme de dispositivos. Por otra parte el artículo Media Queries for Standard Devices de CSS-Tricks, que te viene con un código de los media-queries que deberías usar para definir estilos para un dispositivo, lo que nos parece un poco error por los motivos que ya hemos comentado, pero que podrían ser de utilidad a los interesados (solo por capricho) de aplicar estilos específicos para un modelo particular.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Pablo Soto

01/7/2015
Pantallas y densidades
A mi me preocupa el tema de las densidades de pantalla, q no entiendo mucho como se relaciona con la anchura de las imágenes en el HTML.

midesweb

06/7/2015
Trataremos más adelante con detalle el tema de las imágenes
Hola,
El tema de las imágenes y las resoluciones, densidades de píxeles y esas cosas las vamos a tratar más adelante con detalle. Gracias x la sugerencia.

paul mel

01/9/2015
medidas relativas en `media queries`
yo recomendaría, al igual que @bradfrost, medidas relativas en `media queries`:

http://bradfrost.com/blog/post/7-habits-of-highly-effective-media-queries/#relative

Joelo

20/1/2016
Medidas mayores
Es necesario hacer un media query por cada medida mayor a 1300 por ejemplo que es la medida del monitor de mi laptop?

O el porcentaje de usuarios con medidas mayores a 1300 es tan bajo que no es necesario?

omar mcClellan

18/2/2016
genio! mil gracias
excelente aporte, justo la información que necesitaba, concreto y sin tantos rodeos