Resoluciones móviles

Publicado por Iván Gajate el 15 de enero de 2014 en css, Desarrollo Web, JavaScript

A la hora de maquetar nuestro sitio responsive, necesitamos saber las dimensiones de los dispositivos que hay en el mercado, para saber donde situar los puntos de corte.

Hay infinidad de dispositivos, resoluciones y densidades de pixel, y puede parecer un infierno a primera vista 🙁

Lo primero que tenemos que hacer es colocar esta etiqueta en nuestro html:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Con ella le indicamos a nuestro html que tome como anchura de la pantalla la anchura de nuestro dispositivo.

Cada dispositivo tiene unas dimensiones, pero también tiene una densidad de pixeles, sin embargo a la hora de maquetar debemos tratarlos como si de densidad simple se tratase.

Por ejemplo un iPad 1 tiene como dimensiones de pantalla 1024 x 768 (132 ppp),.
Un iPad 3 retina, tiene el doble de densidad de pixels (264 ppp) y tiene unas dimensiones de pantalla de 2048 x 1536.
Sin embargo, ambos se tratan de igual manera en nuestras media queries, tomando ambos como 1024 x 768

Tengo una página para obtener fácilmente las dimensiones de pantalla:

http://yporqueno.es/lab/mobile/

Voy actualizando los valores en una tabla, para tener una referencia de los modelos que hay en el mercado.
 

 

 

2 comentarios para “Resoluciones móviles”

  1. Y aquí se pueden ver los valores desde el propio dispositivo
    http://dpi.lv/

  2. Esta tabla también está muy completa:

    http://viewportsizes.com/