Medidas de pantallas para mediaqueries

Tomando en cuenta que ahora google tiene su “mobilegeddon” con todos los sitios no responsivos (adaptables dependiendo del viewport donde se vea el sitio) he considerado hacer una anotaci贸n con todos los mediaqueries que uso al momento de construir un sitio web 馃榾 (Consideralo un freebie de conocimiento).

Medidas de tel茅fonos m贸viles:

Apple

  • iPhone 4 y 4S: 320 x 480
  • iPhone 5 y 5S: 320 x 568
  • iPhone 6: 375 x 667
  • iPhone 6+: 414 x 736

Android

  • 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:

Aqui tenemos un detalle con la densidad de p铆xeles de las pantallas, aunque iPad 1, 2, 3 y 4, incluso el iPad Mini, tengan el mismo tama帽o de 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.

Apple

  • Todos (hasta el mini): 1024 x 768

Android

  • 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:

  • Microsoft Surface W8 RT: 768 x 1366
  • Microsoft Surface W8 Pro: 720 x 1280

PC de Escritorio / Laptops聽

  • 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铆 la cosa se pone complicada, ya聽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

Es todo un rollo armar las mediaqueries para todas estas vistas, pero te asegura aparte de una buena UX (Experiencia de Usuario), una mejor puntuaci贸n en el PageSpeed de Google.

 

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende c贸mo se procesan los datos de tus comentarios.

A %d blogueros les gusta esto: