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.

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.