Vistas del puerto 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 principal de DevTools. Aprende cómo usar sus controles para simular un amplio conjunto de dispositivos o para lograr total receptividad.

TL;DR

  • Prueba la receptividad de tu sitio con el emulador de pantallas de Device Mode.
  • Guarda dispositivos preestablecidos personalizados para poder acceder a ellos fácilmente en otro momento.
  • Device Mode no reemplaza la prueba del dispositivo real. Ten en cuenta sus limitaciones.

Uso de los controles de la vista del puerto

Device Mode habilitado

Los controles de la vista del puerto te permiten probar tu sitio en una serie de dispositivos, así como también de manera totalmente receptiva. Tiene dos modos:

  1. Adaptable. Permite modificar libremente el tamaño de la vista del puerto mediante controladores en cada lado.
  2. Dispositivo específico. Bloquea la vista del puerto en el tamaño exacto de un dispositivo específico y emula determinadas características del dispositivo.

Modo adaptable

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

Activa la barra de consultas de medios para aprovechar el modo adaptable al máximo.

Personalización del tamaño de la vista del puerto

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

Modo específico del dispositivo

Usa Device-specific Mode cuando estés por terminar el desarrollo activo y desees 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 de dispositivos. Después de seleccionar un dispositivo, cada valor preestablecido automáticamente configura la emulación de determinadas características del 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

Adición de dispositivos personalizados preestablecidos

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 funciona principalmente como una manera de alternar entre la orientación horizontal y la vertical.

En los dispositivos seleccionados, el control hace más que solo 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 establece automáticamente el nivel de zoom según el espacio máximo disponible.
  2. La opción Explicit percentages es útil, por ejemplo, si deseas probar DPI en imágenes.
Zoom to Fit

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

Puedes cambiar o habilitar los controles opcionales 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 escritorio 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 Device pixel ratio. La relación de píxeles del dispositivo (DPR) es la relación entre los píxeles lógicos y los 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 de 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 CSS.

  • El atributo srcset en 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 se verá pixelado.

Consultas de medios

Las 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.

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 vista del puerto y los estilos de vista previa a los tamaños de las pantallas objetivo.

Visualización de 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 pasar 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 vista del puerto.

Configuración de la red (UA, Network throttling)

Si seleccionas esta opción, se abre el panel lateral Network Conditions, donde puedes cambiar los siguientes comportamientos de 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: Permite simular conexiones de red lentas.
  3. User Agent: Permite anular una cadena de UA (User Agent) específica.

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, por ejemplo, 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.
    • La reproducción HLS (HTTP Live Streaming para video) no se admite durante la emulación, pero es compatible de manera nativa en iOS y Android Chrome.
    • El error de zoom de orientación de iOS 5 no se emula.
    • La propiedad de altura de línea de 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

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 la depuración remota para obtener más datos.

Comentarios

Was this page helpful?
Yes
What was the best thing about this page?
It helped me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had the information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had accurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was easy to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
No
What was the worst thing about this page?
It didn't help me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was missing information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had inaccurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was hard to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.