Don't miss out on the action at this year's Chrome Dev Summit, streaming live on YouTube. Watch now.

Ventanas de visualización receptivas de pruebas y específicas del dispositivo

La versión actualizada de Device Mode (a partir de Chrome 49) es una parte esencial de DevTools que prioriza los dispositivos móviles y amplía la barra de DevTools. Aprende cómo usar sus controles para simular un amplio conjunto de dispositivos o para ser totalmente adaptable.

TL;DR

  • Prueba la receptividad de tu sitio usando el emulador de pantalla de Device Mode.
  • Guarda los valores preestablecidos personalizados así después puedes acceder a ellos con facilidad.
  • Device Mode no reemplaza a las pruebas de dispositivos reales. Ten en cuenta sus limitaciones.

Usar los controles de la ventana de visualización

device mode habilitado

Los Controles de la ventana de visualización te permiten probar tu sitio con una serie de dispositivos, así como también de manera totalmente receptiva. Tiene dos modos:

  1. Responsive: Hace que el tamaño de la ventana de visualización se pueda modificar libremente mediante grandes controladores a cada lado.
  2. Dispositivo específico. Bloquea a la ventana de visualización en el tamaño de ventana de visualización exacto de un dispositivo específico y emula determinadas características del dispositivo.

Modo adaptable

Recomendamos que uses Responsive Mode como tu modo de trabajo predeterminado. Úsalo durante el desarrollo activo de tu sitio y app, y modifica el tamaño de la ventana de visualización con frecuencia a fin de crear un diseño libremente adaptable que se adapte incluso a tipos de dispositivos futuros y desconocidos.

Activa la Media Queries Bar para aprovechar Responsive Mode al máximo.

Personalizar el tamaño de la ventana de visualización

Para lograr un control más detallado, arrastra los grandes controladores de modificación del tamaño en la ventana de visualización o haz clic en el valores de la barra de menú.

Modo específico del dispositivo

Usa el Device-specific Mode cuando estás por terminar el desarrollo activo y deseas perfeccionar la apariencia de tu sitio en dispositivos móviles específicos (p. ej., un determinado iPhone o Nexus).

Valores preestablecidos integrados en el dispositivo

Hemos incluido los dispositivos más populares de la actualidad en el menú desplegable del dispositivo. Luego de seleccionar un dispositivo, cada valor preestablecido automáticamente configura la emulación de determinadas características de dispositivo:

  • Establece la cadena "User Agent" (UA) correcta.
  • Establece la resolución y DPI del dispositivo (relación de píxeles del dispositivo).
  • Emula eventos táctiles (de ser aplicables).
  • Emula superposiciones de la barra de desplazamiento de dispositivos móviles y metaventana de visualización.
  • Mide automáticamente (aumenta) el tamaño del texto para las páginas sin una ventana de visualización definida.
selecciona un dispositivo

Agregar valores preestablecidos a dispositivos personalizados

Device Mode ofrece una amplia gama de dispositivos para emular. Puedes agregar un dispositivo personalizado si encuentras un dispositivo de caso límite o nuevo que no esté incluido.

Para agregar un dispositivo personalizado:

  1. Ve a DevTools Settings.
  2. Haz clic en la pestaña Devices.
  3. Haz clic en Add custom device.
  4. Ingresa un nombre de dispositivo, el ancho, la altura, la relación de píxeles del dispositivo y la cadena user agent.
  5. Haz clic en Add.

Tu dispositivo personalizado ahora está disponible en el menú desplegable Device.

selecciona un dispositivo

Estados y orientación del dispositivo

activar o desactivar orientación

Cuando se emula a un dispositivo específico, la barra de herramientas de Device Mode muestra un control adicional que primero funciona como una manera de activar o desactivar la orientación entre horizontal y vertical.

En los dispositivos seleccionados, el control hace más que meramente activar o desactivar la orientación. En dispositivos compatibles como Nexus 5X, encontrarás un menú desplegable que te permite emular determinados estados del dispositivo, por ejemplo:

  • IU del navegador predeterminado
  • Con la barra de navegación de Chrome
  • Con teclado abierto
Cambia la IU del dispositivo

Zoom to fit

A veces querrás probar un dispositivo con una resolución mayor que el espacio real disponible en la ventana de tu navegador. En estos casos, es útil la opción Zoom to Fit:

  1. Fit to Window automáticamente establece el nivel de zoom según el espacio máximo disponible.
  2. Explicit percentages son útiles, por ejemplo, si deseas probar DPI en imágenes.
Zoom to Fit

Controles opcionales (p. ej., toque, consultas de medios, DPR)

Los controles opcionales pueden cambiarse o habilitarse si haces clic en los tres puntos pequeños que aparecen en el lado derecho de la barra de herramientas del dispositivo. Las opciones actuales incluyen

  • Tipo de user agent (Emula UA y eventos táctiles)
  • Relación de píxeles del dispositivo
  • Consultas de medios
  • Reglas
  • Configurar red (UA, Network Throttling)
Configuración de Device Mode

Continúa leyendo para conocer más acerca de las opciones específicas.

User agent type

La configuración User Agent Type o Device Type te permite cambiar el tipo de dispositivo. Los posibles valores son los siguientes:

  1. Móvil
  2. De escritorio
  3. De escritorio y táctil

Cambiar esta configuración influirá en la emulación de la ventana de visualización del dispositivo móvil y los eventos táctiles, además cambiará la cadena UA. Así que si te gustaría crear un sitio adaptable para Desktop y quieres probar los efectos de desplazamiento, cambia a "Desktop" en Responsive Mode.

Sugerencia: También puedes establecer user agent en el panel lateral Network conditions.

Relación de píxeles del dispositivo (DPR)

Si deseas emular un dispositivo Retina desde una máquina que no sea Retina o viceversa , ajusta la Relación de píxeles del dispositivo. La relación de píxeles del dispositivo (DPR) es la relación entre píxeles lógicos y píxeles físicos. Los dispositivos con pantallas Retina, como Nexus 6P, tienen mayor densidad de píxeles que los dispositivos estándar, lo cual puede afectar la nitidez y el tamaño del contenido visual.

Algunos ejemplos de sensibilidad "Relación de píxeles del dispositivo" (DPR) en la Web son:

  • Consultas de medios de CSS como:

    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { ... }

  • las reglas image-set de las CSS;

  • el atributo srcset en las imágenes;

  • La propiedad window.devicePixelRatio.

Si tienes una pantalla Retina nativa, verás que los recursos con valores bajos de "Puntos por pulgada" (PPP) parecen pixelados mientras que los recursos con valores altos de PPP son nítidos. Para simular este efecto en una pantalla estándar, fija la DPR en 2 y aumenta la ventana de visualización con el zoom. Un recurso 2x continuará viéndose nítido, mientras que uno 1x parecerá pixelado.

Consultas de medios

Consultas de medios son una parte esencial del diseño web adaptable. Para ver el inspector de consulta de medios, haz clic en Show Media queries en el menú de tres puntos. DevTools detecta las consultas de medios en tus hojas de estilo y las muestra como barras coloreadas en la regla superior.

mostrar consultas de medios

inspector de consulta de medios

Las consultas de medios están codificadas por colores tal como se muestra a continuación:

Consultas que tienen como objetivo un ancho máximo.
Consultas que tienen como objetivo anchos dentro de un rango.
Consultas que tienen como objetivo un ancho mínimo.

Obtener una vista previa rápida de una consulta de medios

Haz clic en la barra de una consulta de medios para ajustar el tamaño de la ventana de visualización y los estilos de vista previa para los tamaños de las pantallas objetivo.

Ver CSS asociado

Haz clic con el botón secundario en una barra para ver dónde se define la consulta de medios en CSS y pasa a la definición en el código fuente.

vista de los principios fundamentales web de las consultas de medios

Reglas

Activa o desactiva esta opción para mostrar las reglas basadas en píxeles al lado de la ventana de visualización.

Configura la red (UA, network throttling)

Cuando seleccionas esta opción, se abre un panel en el Panel lateral que te permite cambiar comportamientos relacionados con la red:

  1. Disk Cache: deshabilitar Disk Cache impide que el navegador almacene las páginas y sus recursos en caché mientras DevTools está abierto.
  2. Network Throttling: obtén más información sobre Network Throttling aquí.
  3. User Agent: Te permite anular una cadena UA (User Agent) específica.

Sugerencia: También puedes abrir el panel lateral Network conditions desde el menú principal.

Limitaciones

Device Mode tiene algunas limitaciones.

  • Hardware del dispositivo
  • El comportamiento de la GPU y la CPU no se emula.
  • IU del navegador
  • Las pantallas del sistema, como la barra de direcciones, no se emulan.
  • Las pantallas nativas, como los elementos <select>, no se emulan como una lista modal.
  • Algunas mejoras, como las entradas de números para abrir un teclado numérico, pueden diferir respecto del comportamiento real del dispositivo.
  • Funcionalidad del navegador
  • WebGL funciona en el emulador, pero no es compatible con los dispositivos iOS 7.
  • MathML no se admite en Chrome, pero es compatible con los dispositivos iOS 7.
  • El error de zoom de orientación de iOS 5 no se emula.
  • La propiedad de altura de línea de la CSS funciona en el emulador, pero no es compatible con Opera Mini.
  • Los límites de las reglas de CSS, como las de Internet Explorer, no se emulan.
  • AppCache
  • El emulador no anula la UA para AppCache archivos del manifiesto o ver solicitudes de origen.

Pese a estas limitaciones, Device Mode es lo suficientemente sólido para realizar la mayoría de las tareas. Cuando necesites probar en un dispositivo real, puedes usar Depuración remota para conocer más.