ResponsividadTutoriales

Emulación de responsividad utilizando Chrome

La responsividad en el diseño web es un enfoque que permite que un sitio web sea visto y usado de forma eficiente en diferentes dispositivos y navegadores web. La idea se basa en que todos los dispositivos acceden a un mismo sitio web, pero se le aplican diferentes estilos basados principalmente en el tamaño y la resolución del dispositivo desde el que se visita el sitio web.

Existen tres formas principales de realizar pruebas a un sitio web para comprobar que es un sitio responsivo:

  • Utilizando dispositivos reales.
  • Utilizando emuladores
  • Mediante servicios de terceros.

Los navegadores web cuentan con simuladores de responsividad, en esta entrada vamos a explicar como realizar una emulación de responsividad utilizando Chrome.

Procedimiento para la emulación de responsividad

El primer paso es abrir la página web en Chrome. Para esta prueba vamos a utilizar la página de Grupo TICC.

Abrimos la página que nos interesa ver su responsividad

El siguiente paso es apretar la tecla F12, con lo cual se abrirá una barra de herramientas. Después, dar clic en el botón mostrado para entrar a la emulación de responsividad.

Al presionar F12 se abre una barra de herramientas

Ahora ya podemos ver la emulación de la página web de la misma forma en que la veríamos si accedemos a ella desde diferentes dispositivos con diferentes resoluciones.

Ya se puede ver la página web en diferentes dispositivos

El menú desplegable de la parte superior nos muestra los diferentes dispositivos que podemos emular, por ejemplo, se tienen GalaxyS5, iPod, iPhone, MotoG4 y más.

En el menú se pueden elegir diferentes dispositivos

Al dar clic en la opción de «Responsive», podemos ajustar las dimensiones de la visualización al valor que deseemos en lugar de escoger un dispositivo en específico.

Con la opción Responsive se puede ajustar la resolución de pantalla

Las dimensiones de la ventana se pueden ajustar de dos formas diferentes: ingresando los valores en la parte superior o arrastrando los botones hasta lograr la resolución buscada.

Se puede ingresar una resolución específica o ajustar con los botones

Para conocer más acerca de la responsividad y los elementos que la componen de click en el siguiente enlace: Importancia de la responsividad en el diseño web

Compartir:

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *