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

A %d blogueros les gusta esto: