Cambiar a la vista móvil

Vista previa de la ventana gráfica móvil con un solo clic para cualquier página.

El público web moderno no se queda quieto. Pasa de los monitores de 27 pulgadas del trabajo a las pantallas de bolsillo del tren, y espera que cada sitio esté hecho a medida para ambos. Para diseñadores, desarrolladores, profesionales del marketing e incluso usuarios avanzados, esto plantea una pregunta diaria: "¿Cómo se verá esta página en un teléfono real?". Las herramientas de desarrollo de Chrome pueden responderla, después de explorar menús, paneles y una maraña de marcos de dispositivos. Cambiar a la vista móvil simplifica ese proceso a un solo clic o acceso directo. Toca el ícono de la barra de herramientas (o presiona Alt + M) y la página actual se limita instantáneamente a la ventana gráfica del tamaño de un teléfono. Un fondo gris suave aísla la página del resto de la ventana del navegador, destacando tu contenido y recordándote visualmente que la Vista Móvil está activa. Un pequeño icono flota en la esquina mostrando la configuración predeterminada del dispositivo (a partir del iPhone 14). La extensión incluye tres de los puntos de interrupción más solicitados: iPhone 14 (390 × 844 px), Pixel 7 (412 × 915 px) y iPad mini (768 × 1024 px). Cada ajuste preestablecido ajusta la etiqueta meta viewport, el ancho de los elementos y el comportamiento de desplazamiento para simular la experiencia del dispositivo seleccionado. ¿Quién se beneficia? Los desarrolladores front-end pueden detectar regresiones de diseño en segundos sin abrir DevTools, lo que resulta ideal cuando se hacen malabarismos con múltiples ramas o servidores de prueba. Los diseñadores de UI/UX obtienen una rápida verificación de cordura antes de enviar nuevas composiciones de Figma a ingeniería. Los equipos de control de calidad pueden incluir atajos de teclado en conjuntos de pruebas automatizadas para realizar pruebas con mayor rapidez. Los creadores de contenido y los especialistas en marketing obtienen una vista previa de los boletines informativos, las páginas de destino y las incrustaciones sociales para garantizar la legibilidad en pantallas pequeñas. Los agentes de atención al cliente que reproducen problemas informados por usuarios móviles ya no necesitan dispositivos físicos ni simuladores. Los educadores y estudiantes que exploran conceptos de diseño responsivo obtienen un espacio protegido accesible y con permisos. Ya sea que esté ajustando un flujo de pago minutos antes del lanzamiento o enseñando a una clase llena de desarrolladores aspirantes, esta extensión se adapta a su flujo de trabajo con una curva de aprendizaje casi nula.