¿Cuál es mi resolución de pantalla?

¿Cuál es mi resolución de pantalla?

El panel de arriba muestra lo que tu navegador informa sobre tu pantalla, junto con otros cinco rectángulos que también controla. Si solo quieres el número principal, es el primero. Y si quieres saber si ese número es tu resolución real, la respuesta honesta es que tu navegador no está obligado a decírtelo: esta página te enseña exactamente de dónde sale esa incertidumbre en lugar de taparla.

Una resolución de pantalla es un recuento de píxeles: 1920 de ancho por 1080 de alto es la pantalla de escritorio más extendida del mundo. La complicación es que los navegadores no miden en píxeles de hardware, sino en píxeles CSS, una unidad desacoplada del panel a propósito para que una página tenga más o menos el mismo tamaño físico en un móvil, un portátil y un televisor. En una pantalla con un escalado del 200%, un píxel CSS cubre dos píxeles de hardware en cada dirección, y el navegador informa de la mitad de los números que aparecen en la ficha técnica.

Por eso un portátil 4K de 3840 de ancho informa muy a menudo de 1920. No es un fallo ni hay nada roto: es la unidad haciendo su trabajo.

Cómo leer los resultados

1. Empieza por el número grande. Es screen.width por screen.height, en píxeles CSS. Para la mayoría de la gente, con la pantalla al 100% de escalado, es la resolución del hardware y no hace falta nada más.
2. Compara los seis rectángulos. Cada uno es una medida distinta y los huecos entre ellos significan algo: el marco del navegador, la barra de desplazamiento, la barra de tareas, el zoom táctil. Cambia el tamaño de la ventana y mira qué filas se mueven.
3. Lee la estimación y su advertencia. Multiplicar por la relación de píxeles da una suposición de tus píxeles físicos, y la lista de debajo enseña todas las combinaciones de escalado y zoom que darían exactamente la misma relación.

Seis rectángulos, y todas las herramientas confunden algunos

La especificación CSSOM View define cada uno por separado, y son cosas genuinamente distintas. screen.width es toda la pantalla. screen.availWidth es la pantalla menos lo que reserva el sistema operativo: la barra de tareas de Windows, la barra de menús y el dock de macOS. outerWidth es la ventana del navegador con sus propias barras. innerWidth es el viewport, la zona donde una página puede dibujar de verdad, e incluye la barra de desplazamiento. document.documentElement.clientWidth es ese mismo viewport sin la barra, así que la diferencia entre esas dos filas es literalmente el ancho de tu barra de desplazamiento. Y visualViewport es la parte que ves ahora mismo, que es lo que cambia al hacer zoom con dos dedos en un móvil o cuando sube un teclado en pantalla.

Casi toda la confusión en los informes de errores viene de comparar dos de estos como si fueran uno. Un diseño que se rompe «a 1280» puede romperse con una ventana de 1280, con un viewport de 1280 o con una pantalla de 1280 con una ventana más estrecha dentro, y son tres pruebas distintas.

Verlos moverse es la forma más rápida de interiorizarlo. Estrecha esta ventana y las cuatro últimas filas cambian mientras las dos primeras no; abre las herramientas de desarrollo ancladas al lado y las filas del viewport encogen mientras las de la ventana se quedan quietas.

Por qué el navegador no puede darte la resolución de tu hardware

Hay dos razones distintas, y las dos están escritas en la especificación en lugar de ser manías de un navegador concreto.

La primera es que el navegador tiene permiso para inventarse el número. El módulo CSSOM View define screen.width como el ancho del «área de pantalla expuesta a la web», y define esa área como «uno de los siguientes: el área del dispositivo de salida, en píxeles CSS; el área del viewport, en píxeles CSS». Un navegador que te dé el tamaño de su propia ventana en vez del de tu monitor cumple la norma por completo. Y es deliberado: la sección 15 de ese mismo documento afirma que la interfaz Screen «puede usarse como entrada de algoritmos de huella digital» y que los agentes de usuario «pueden optar por ocultar o cuantizar la información sobre el tamaño o la configuración de la pantalla» para proteger al usuario. Los navegadores y los modos endurecidos contra el rastreo hacen exactamente eso. Conviene señalar que MDN describe la propiedad como simplemente «el ancho de la pantalla en píxeles CSS», que es la primera opción de la especificación presentada como si fuera la única.

La segunda razón derriba el atajo evidente. Multiplicar el tamaño CSS por devicePixelRatio parece que debería recuperar los píxeles del hardware, y la propia definición de la especificación lo impide: esa relación es el tamaño de un píxel CSS «con el zoom de página actual» dividido por el tamaño de un píxel del dispositivo. El zoom de la página va metido en el mismo número que el escalado de la pantalla. Una relación de 2 significa una pantalla de alta densidad al 100% de zoom, o una pantalla normal al 200%, y ningún JavaScript puede decirte cuál: pulsa Ctrl y más unas cuantas veces y mira cómo cambia la estimación de arriba mientras tu monitor no se mueve.

Un detalle pequeño de esa misma frase, porque casi nadie lo menciona: la relación se define usando el tamaño vertical de un píxel del dispositivo en concreto. En una pantalla hipotética con píxeles no cuadrados, la cifra horizontal no sería la que te han dado.

Los nombres, y los que están mal

La relación de aspecto de arriba está reducida de forma exacta, lo que revela más de lo que parece. 1366×768, el panel de portátil más común durante casi una década, se llama habitualmente 16:9 y no lo es: reducido es 683:384, porque 16:9 de 768 sale 1365,33 y no puedes tener un tercio de píxel. Se queda a un 0,05%, así que nadie se da cuenta, pero no es la misma forma.

Los monitores ultrapanorámicos que se venden como 21:9 se alejan más y ni siquiera coinciden entre sí. 2560×1080 es 64:27 y 3440×1440 es 43:18, a un 1,6% y un 2,4% de 21:9 respectivamente, y con formas distintas la una de la otra pese a compartir etiqueta comercial. Del mismo modo, 1280×1024 es exactamente 5:4 y no el 4:3 que sugiere su época, y por eso las fotos salían estiradas en aquellos monitores.

«4K» nombra dos cosas distintas. 3840×2160, la de televisores y monitores, es exactamente 16:9 y se llama propiamente UHD. 4096×2160, la del cine, es 256:135: una forma genuinamente distinta, a un 6,7% de 16:9. La herramienta nombra las dos correctamente en vez de tratar 4K como una sola resolución. Y aunque el nombre sugiere cuatro mil de algo, lo que sí es cierto resulta más útil: UHD contiene exactamente cuatro veces los píxeles de Full HD.

¿Por qué es gratis?

Todo lo de aquí lo mide tu propio navegador y se muestra en el acto. Ninguna medida se envía a ninguna parte, no se registra nada y no hay cuenta que crear: la página no nos cuesta nada por visitante más allá de unos kilobytes de JavaScript.

Sin registro, sin límites y sin marca de agua en nada de lo que copies.