Comprobador de resolución de pantalla
Viewport, ratio y densidad de píxeles

Qué Hace Por Ti Un Comprobador De Resolución De Pantalla

Los números de la pantalla se esconden en tres sitios distintos. Tu sistema conoce un tamaño, la ventana del navegador conoce otro y tu página ve un tercero. Por tanto, esta herramienta los pone los tres uno al lado del otro, y entonces las diferencias entre ellos cobran sentido por fin.

No hay nada que configurar. Porque la página lee cada valor en el momento en que carga, el tamaño de tu pantalla, tu viewport y tu ratio de píxeles están en pantalla antes de que toques nada.

Cuatro paneles comparten una página. Como resultado, puedes pasar del tamaño simple de la pantalla al ratio de aspecto, la densidad de píxeles y la frecuencia de refresco sin salir de la pestaña.

Todo funciona en tu navegador. Así que ninguna de estas lecturas llega a este sitio y no almacenamos nada.

Cómo Funciona El Comprobador De Resolución De Pantalla

Primero, la herramienta pide a tu navegador el objeto screen. Luego mide la ventana en sí. A continuación divide uno por otro, así que el ratio de píxeles y el recuento de píxeles nativos salen de esas dos mismas lecturas.

La herramienta no adivina nada. Porque cada línea viene de una propiedad documentada del navegador, puedes comprobar cada una tú mismo en una consola si quieres.

¿Cuál Es Mi Resolución De Pantalla?

El par del titular es lo que la mayoría viene a buscar. Así que la parte de arriba muestra el ancho y el alto de tu pantalla, escritos como los escribe una ficha técnica, por ejemplo 1920 por 1080.

Ese par viene del objeto screen que expone tu navegador. Porque el navegador cuenta en píxeles CSS, un portátil con un panel nítido suele mostrar un número menor que el de la caja.

Píxeles CSS Y Píxeles Nativos

En toda pantalla moderna viven dos recuentos de píxeles. El píxel CSS es la unidad en la que habla tu hoja de estilos, mientras que el píxel nativo es un punto real del panel.

Así que la herramienta multiplica el tamaño CSS por el ratio de píxeles y luego imprime el tamaño nativo debajo. Por ejemplo, una pantalla de 1512 por 982 con un ratio de dos tiene en realidad 3024 por 1964 puntos. La página de MDN sobre window.devicePixelRatio explica la regla que siguen los navegadores.

El Área De Pantalla Disponible

Tu pantalla no es toda tuya. Porque la barra de tareas, el dock o la barra de menú se quedan una franja, el navegador indica también un ancho y un alto disponibles.

La herramienta muestra los dos pares, así que la diferencia te dice cuánto mobiliario retiene tu escritorio. En un móvil los dos pares suelen coincidir, mientras que en un escritorio rara vez lo hacen.

Profundidad De Color Y Orientación

Dos lecturas más pequeñas viven en el mismo panel. La profundidad de color cuenta los bits por píxel, y casi todas las pantallas de hoy responden veinticuatro.

La orientación dice si estás en vertical o en horizontal, y también da el ángulo. Por tanto, una tableta que giras actualiza las dos líneas a la vez, como describe la página de MDN sobre screen.orientation.

Un Medidor De Viewport En La Misma Página

El viewport es la parte de la ventana donde tu página puede dibujar de verdad. Así que el segundo panel lo mide directamente y luego compara esa cifra con el tamaño de pantalla de arriba.

Aquí aparecen dos lecturas. La ventana da un ancho, mientras que el elemento del documento da otro, y cualquier diferencia entre ellos es la barra de scroll.

A veces esa diferencia es cero. Porque un navegador con barras superpuestas flota la barra sobre la página en vez de reservarle sitio, el panel indica entonces cero píxeles, y la captura de abajo muestra justo ese caso.

Por Qué El Viewport Es Menor Que La Pantalla

El mobiliario del navegador se come el resto. Porque la tira de pestañas, la barra de direcciones y la fila de marcadores se sitúan encima de tu página, el viewport pierde cien píxeles de alto o más.

El ancho va por el mismo camino en cuanto aparece una barra de scroll. Así que una ventana maximizada en una pantalla de 1920 de ancho suele indicar 1905 para el documento, y esos 15 que faltan son la barra misma. Las reglas de ambas lecturas viven en el módulo CSSOM View del W3C.

En Qué Breakpoint Estás

La mayoría de los sitios cambia de diseño en unos pocos anchos fijos. Así que la herramienta nombra la banda en la que estás ahora mismo, desde un móvil estrecho hasta un escritorio ancho pasando por una tableta.

Cambia el tamaño de la ventana y la etiqueta te sigue. Por tanto, puedes ver exactamente dónde cambia un diseño, sin abrir una sola herramienta de desarrollo.

El Viewport Visual En Un Móvil

Un móvil añade una capa más. Cuando se abre el teclado o haces zoom con los dedos, la parte que ves se encoge aunque el diseño mantenga su tamaño.

La herramienta indica esa caja visible y la escala del zoom al lado. Para los detalles, consulta la página de MDN sobre la API VisualViewport.

Ratio De Aspecto Y Densidad De Píxeles

El tercer panel convierte tus dos tamaños en formas. Primero reduce el tamaño de la pantalla a un ratio y luego calcula lo juntos que están los píxeles.

Las dos cifras ayudan cuando eliges una imagen o un vídeo. Por ejemplo, un banner 16:9 encaja exacto en una pantalla de 1920 por 1080, mientras que un portátil 16:10 deja una banda.

Cómo Reduce La Herramienta El Ratio De Aspecto

Un ratio es solo una fracción en su forma más simple. Así que la herramienta divide los dos lados por su máximo común divisor, y 1920 por 1080 queda en 16:9.

Algunos tamaños nunca caen en un par limpio. Por ejemplo, 1366 por 768 se reduce a 683:384, así que la herramienta nombra además el ratio común más cercano a su lado.

Los PPI Necesitan La Diagonal De Tu Monitor

Los píxeles por pulgada no pueden venir del navegador. Porque ninguna página web puede preguntar a un panel cuánto mide en pulgadas, la cifra queda vacía hasta que escribes la diagonal tú mismo.

Introduce 27 para un monitor de 27 pulgadas y la herramienta hace el resto. Entonces divide la diagonal nativa en píxeles entre tu medida, así que un panel de 3840 por 2160 a 27 pulgadas ronda los 163 PPI.

Frecuencia De Refresco Y Capacidad De La Pantalla

El cuarto panel pregunta qué puede hacer tu pantalla. Así que muestrea la frecuencia de refresco y luego comprueba las funciones de color y contraste que tu navegador reconoce.

Cada línea de aquí recoge una respuesta del navegador, no una consulta al hardware. Por tanto, el panel es honesto sobre esa diferencia.

La Frecuencia De Refresco Es Una Estimación

Ningún navegador entrega la frecuencia de refresco directamente. En cambio, la herramienta cuenta fotogramas de animación durante un segundo aproximado y luego redondea el recuento a la frecuencia común más cercana.

Así que trata la respuesta como aproximada y no como exacta. Porque una pestaña ocupada o un ahorro de batería pierde fotogramas, un panel de 120 Hz indica a veces 60 mientras se limita. La llamada de fotograma que hay detrás del recuento está en la página de MDN sobre requestAnimationFrame.

Gama De Color Y Rango Dinámico

Dos media queries responden a la pregunta del color. Una pregunta si tu pantalla cubre el espacio P3, más amplio, mientras que la otra pregunta si maneja alto rango dinámico.

Un sí aquí significa que tu navegador declara esa capacidad. Así que tómalo como una pista para una decisión de CSS, como sugiere la referencia de color-gamut de MDN, y no como un informe de calibración.

Pistas De Contraste, Movimiento Y Puntero

El mismo panel lee las preferencias que guardas en tu sistema. El modo oscuro, el movimiento reducido, el contraste alto y los colores forzados tienen cada uno su línea.

El puntero y el hover lo completan, así que una pantalla táctil y un ratón se distinguen de inmediato. Todas estas queries están en la especificación Media Queries Level 5 del W3C.

Qué No Puede Decirte Este Comprobador De Resolución De Pantalla

Una herramienta honesta nombra sus límites. Así que estas son las líneas que esta página nunca imprimirá, por mucho que la recargues.

El modelo de tu monitor sigue siendo desconocido, y lo mismo pasa con la marca de tu tarjeta gráfica. Las pulgadas físicas necesitan tu propia medida, mientras que la frecuencia de refresco sigue siendo una muestra y no una lectura del panel.

Copia El Informe Completo

Un botón se lleva todo. Así que pulsa Copiar informe y cada panel llega a tu portapapeles como una lista plana de etiquetas y valores.

Esa lista se pega directamente en un ticket de error. Por tanto, quien prueba puede decir exactamente qué pantalla, viewport y ratio provocaron el problema de diseño.

Seguro Por Diseño

La herramienta funciona en tu navegador. No envía nada y no almacena nada. Así que los tamaños que lee, la diagonal que escribes y el informe que copias se quedan en tu propio dispositivo.