Como sabemos, los breakpoints de un diseño Responsive Web Design para crear tusMediaQueries 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 webViewport 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.
Fuente:enlace
Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros
Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve para más información
No hay comentarios:
Publicar un comentario