Visualizar web en varios dispositivos y resoluciones (Comprobar Responsive)

Una de las tareas más importantes de todo maquetador web es comprobar el aspecto que presenta una página en los distintos dispositivos que existen con sus resoluciones.

Actualmente la cantidad de dispositivos es enorme (como podemos ver en el listado que nos provee mydevice.io), y sería imposible comprobar que nuestra web se viese bien en todos ellos, por lo que recomendamos hacerlo sólo en los mas comunes. Para ello vamos a usar Chrome Developer Tools que viene con el navegador Google Chrome.

Para abrirlo pulsamos F12 ó CTRL + Mayusculas + I y pulsamos sobre el icono con forma de móvil señalado para iniciar la emulación (toggle device mode).

En la parte superior podemos ver las opciones disponibles, que son:
- Tipo de dispositivo (marca y modelo).
- Resolución.
- Orientación (portrait o landscape).
- Pixel ratio.
- Velocidad de internet.
- User Agent.

También podemos hacer zoom pulsando en el signo + y - que aparecen arriba a la derecha.

En el caso de necesitar más dispositivos de nuestra lista, podemos añadirlos manualmente si conocemos la información necesaria (resolución de pantalla, pixel ratio y user agent), para ello
abrimos Chrome Developer Tools y pulsamos en la opción Settings, en el menú de la derecha, seleccionamos Devices, y a continuación pulsamos el botón Add custom device.

Lo que hacemos con Chrome realmente son emulaciones, por lo que en algunas ocasiones puede haber diferencias al ver la web en el dispositivo real, por lo que siempre vamos a recomendar revisar nuestra web por lo menos en un móvil con sistema Android, iOS y Windows Phone así como en una tablet Android y en otra iOS.

Comentaros que existen muchas alternativas online como responsinator.com, viewport resizer y quirktools.com.