Cómo usarla
- Abre la página. Los valores se leen de inmediato desde el navegador.
- Redimensiona la ventana o gira el dispositivo para ver cómo se actualizan el tamaño y la orientación del viewport.
- Usa «Copiar todo» para pegar los datos en un informe de errores o una solicitud de asistencia.
Cómo funciona
Los navegadores indican los tamaños en píxeles CSS, la unidad que utilizan las páginas web para definir el diseño. En las pantallas de alta densidad, cada píxel CSS se dibuja con varios píxeles físicos: la relación de píxeles del dispositivo (DPR) indica cuántos. Un teléfono que indica 390 × 844 con un DPR de 3 tiene un panel de unos 1170 × 2532 píxeles del dispositivo. En los ordenadores, tanto el zoom del navegador como el escalado de pantalla del sistema operativo modifican el DPR y el tamaño CSS. Por eso, un monitor de 2560 × 1440 con un escalado del 125 % indica 2048 × 1152.
La resolución de pantalla corresponde a toda la pantalla; el espacio disponible excluye las barras permanentes del sistema operativo, como la barra de tareas de Windows o la barra de menús de macOS; y el viewport es la parte de la ventana del navegador donde se muestra la página, sin las barras de herramientas, pero con la barra de desplazamiento. El viewport es lo que tienen en cuenta las media queries de CSS, como min-width: 768px, así que es el valor que debes comprobar al probar diseños adaptables.
El esquema de color y los valores de movimiento reducido proceden de las mismas funciones de medios de CSS que usan los sitios web para adaptarse a la configuración del sistema. Las marcas, la plataforma y el tipo de dispositivo móvil se obtienen mediante User-Agent Client Hints, disponibles solo en navegadores basados en Chromium. Algunos navegadores redondean o fijan estos valores deliberadamente para reducir la huella digital, por lo que puede que no coincidan exactamente con tu hardware.
Ejemplos
Probar un diseño adaptable
Un diseño no se muestra correctamente en el portátil de un compañero. Te envía los datos, que indican un viewport de 1280 × 649 con un DPR de 1,5. Configura la barra de dispositivos del navegador con el mismo viewport para reproducir el problema.
Elegir el tamaño de las imágenes
Una imagen de producto se muestra con 400 píxeles CSS de ancho. En un teléfono con DPR 3 necesita 1200 píxeles para verse nítida. Así puedes saber qué tamaños incluir en srcset.
Comprobar el escalado del monitor
Un monitor de 3840 × 2160 indica 2560 × 1440 con un DPR de 1,5: Windows está aplicando un escalado del 150 %.
Preguntas frecuentes
¿Por qué la resolución de pantalla no coincide con las especificaciones de mi monitor?
Los navegadores indican los tamaños en píxeles CSS, que se obtienen al dividir los píxeles físicos por el factor de escalado. Multiplica el valor por la relación de píxeles del dispositivo para aproximarte a la resolución del hardware. El zoom del navegador también cambia el valor indicado.
¿Cuál es la diferencia entre el tamaño de pantalla y el tamaño del viewport?
El tamaño de pantalla corresponde a toda la pantalla. El viewport es solo el área de la ventana del navegador donde se dibuja la página, por lo que es más pequeño y cambia al redimensionar la ventana o abrir las herramientas para desarrolladores.
¿Se usa esta información para rastrearme?
Esta página no: los valores solo se muestran aquí y no se guardan ni se envían a ningún sitio. Los sitios web pueden leer esos mismos valores; por eso, algunos navegadores los redondean para dificultar la huella digital.
¿Por qué se indica que mi portátil es compatible con la entrada táctil?
La compatibilidad táctil se basa en el número de puntos táctiles que indica el navegador. Los portátiles con pantalla táctil los indican aunque uses principalmente un ratón, y algunos controladores o configuraciones de escritorio remoto indican compatibilidad táctil aunque no haya una pantalla táctil.
Privacidad
JavaScript lee todos los valores en tu navegador y solo te los muestra a ti. No se guarda ni se sube ningún dato, ni se incluye en las analíticas; solo se registra un evento anónimo que indica que la herramienta se abrió y se usó.