Emular una web en varios dispositivos

Para comprovar como se verá una web (local o no) en varios dispositivos, el navegador Google Chrome dispone de una herramienta muy útil.

Tenemos que ir a Menú > Más herrramientas > Herramientas para desarrolladores (o Ctrl + Mayús + I).

Para activar el emulador utilizamos el botón con forma de dispositivo ( mobile). Aparecerá un espacio de trabajo con varias opciones. La más importante es el desplegable “Device”, donde escogeremos qué dispositivo queremos simular. Importante: hay que recordar actualizar la página para que se adapte al dispositivo que hemos escogido, muchas veces no lo hace de forma automática. Hay otras opciones útiles, como rotar el dispositivo, poner una medida customizada…

Además de las opciones que vemos en esta interfaz, podemos acceder a más configuraciones mediante el botón de tres puntos que tenemos a la derecha mobile3 (o entrando al inspector, presionando Esc y escogiendo la opción “Emulation” del menú). Allí podemos configurar opciones como el User Agent, la geolocalización, el acelerómetro…

Una herramienta que me gusta mucho y quizás pasa un poco desapercibida es este iconito que podemos encontrar arriba a la izquierda: media. Se trata de un visualizador de las media queries. Si lo activamos nos muestra una barra con los “saltos” que hace las queries del css. Además, la barra será de un color distinto según el tipo de query que sea:

Azul para las queries que dirigidas a un ancho máximo.

Verde para las queries dirigidas a un rango de anchos.

Naranja para las queries dirigidas a un ancho mínimo.

Para aprender más sobre esta función hay un tutorial de Chrome donde explica de manera muy sencilla y con ejemplos todas las funcionalidades que podemos encontrar. Lo encontrareis aquí.