Resolución de la pantalla
—
Ventana útil
—
Tu ventana dentro de tu pantalla
La ventana donde estás leyendo esto ocupa el — de la superficie de tu pantalla. El resto se lo llevan la interfaz del navegador, las barras del sistema y lo que tengas alrededor.
¿Qué significa esto para tu web?
Tu pantalla dibuja — puntos por cada píxel de los que usa una web para medir. Una imagen subida al tamaño exacto en que se ve saldrá borrosa: hay que subirla al doble.Cómo preparar las imágenes →
Tu pantalla es de densidad estándar: un punto por píxel. Aquí una imagen subida al doble no mejora nada y solo pesa más — pero quien te visite desde un móvil moderno sí la va a necesitar así.
Estás viendo esto en una ventana estrecha, del tamaño de un móvil. Es exactamente el ancho en el que se pierden la mitad de los contactos: menús que no caben, botones pequeños y formularios que obligan a hacer zoom.
Parece que tienes el navegador con un zoom de aproximadamente —. Conviene tenerlo en cuenta antes de dar por hecho que algo «se ve mal»: con el zoom cambiado, lo que tienes delante no es lo que ve quien está al 100 %. Se vuelve al normal con Ctrl+0, o Cmd+0 en un Mac.
Tu puntero principal es táctil. En ese caso, cualquier elemento que se pueda pulsar debería medir al menos 44 píxeles de lado: por debajo de eso, la gente falla y se va.
Tu sistema pide tema oscuro, y esta página se lo está dando sin que hayas tocado nada. Si tu web solo existe en claro, para ti hoy se ve peor de lo que debería.
Tienes activada la reducción de movimiento. Este sitio la respeta y desactiva sus animaciones; muchas webs la ignoran, y para quien la activa por vértigo o migraña eso no es un detalle estético.
¿Cómo se usa?
01
Mira los números
Salen solos al abrir la página. La ventana se recalcula mientras la mueves o la cambias de tamaño.
02
Copia el informe
Un botón deja todo en el portapapeles como texto plano, listo para pegar en un correo.
03
Mándalo con tu consulta
Si algo se ve mal en tu equipo, esos datos ahorran tres correos de ida y vuelta para reproducirlo.
«Resolución» no es una sola cosa
De ahí vienen casi todas las confusiones: cinco medidas distintas que la gente llama igual, y que casi nunca coinciden en el mismo aparato.
- Resolución de la pantalla
- El tamaño del monitor completo, tal y como lo cuenta el sistema. Es el número que casi todo el mundo llama «mi resolución».
- Ventana útil
- El hueco donde cabe la página, ya descontadas las pestañas, la barra de direcciones y las barras de desplazamiento. Es la medida que de verdad manda al diseñar.
- Píxeles físicos
- Los puntos reales del panel. En pantallas de alta densidad son el doble o el triple que los píxeles CSS, y por eso una imagen al tamaño justo se ve borrosa.
- Densidad de píxeles
- Cuántos puntos físicos dibuja el aparato por cada píxel CSS. Un 1 es una pantalla normal; un 2 o un 3, una pantalla de alta resolución.
- Espacio disponible
- La pantalla menos lo que ocupa el sistema operativo: la barra de tareas de Windows, el Dock de macOS, la barra de menús.
- Zoom de página
- Lo que has ampliado o reducido tú con Ctrl y la rueda del ratón. No es una propiedad que el navegador publique, así que aquí se estima; ampliar al 150 % es como tener una pantalla un tercio más estrecha.
¿Necesitas la relación de aspecto de otra medida, o redimensionar sin deformar? Usa la calculadora de relación de aspecto →
Todo esto se sabe de ti sin pedirte permiso
Ninguno de estos datos requiere un permiso ni un aviso. El navegador los expone para que las páginas puedan adaptarse —y hacen falta: sin ellos no habría diseño adaptable ni tema oscuro automático—, pero combinados forman una huella que identifica un equipo sin necesidad de cookies.
Esta página los enseña y ahí se acaba: no los guarda, no los envía y no los cruza con nada. Es la misma decisión que hemos tomado en todo el sitio, que no lleva analítica ni cookies de seguimiento y por eso tampoco te pide que aceptes nada.
Preguntas frecuentes
¿Por qué la resolución que sale aquí no coincide con la que dice mi sistema?
Casi siempre por dos motivos. El primero es la escala: si tienes el sistema al 125 % o al 150 % —lo normal en portátiles de Windows—, el navegador ve una pantalla proporcionalmente más pequeña, y esa es la medida con la que trabaja una web. El segundo es la densidad: un portátil de Apple con panel «retina» tiene el doble de puntos físicos que de píxeles CSS. Por eso esta página muestra las dos cifras por separado en vez de elegir una.
¿Qué es la «ventana útil» y por qué es más pequeña que mi pantalla?
Es el espacio que le queda a la página después de descontar las pestañas, la barra de direcciones, las barras de desplazamiento y, si la tienes, la ventana sin maximizar. Es la medida que importa al diseñar y probar: una web no se adapta a tu monitor, se adapta a ese hueco.
¿Se envían estos datos a algún servidor?
No. Todo lo que ves aquí lo lee tu navegador de sí mismo y se pinta en tu propia pantalla. No hay ninguna petición de red, no se guarda nada y este sitio no usa cookies de seguimiento. El botón de copiar deja el informe en tu portapapeles: eres tú quien decide a quién se lo mandas.
¿Cualquier web puede ver todo esto de mí?
Sí, y esa es la parte interesante. Ninguno de estos datos requiere permiso: son propiedades que el navegador expone a cualquier script para que las páginas puedan adaptarse. Combinados, ayudan a construir una huella digital que identifica un equipo sin necesidad de cookies. Verlos juntos es la mejor manera de entender qué se sabe de ti sin haber aceptado nada.
¿Por qué el navegador o el sistema aparecen como «no identificado»?
Porque esa parte se deduce de la cadena de agente de usuario, que es texto libre que cualquiera puede cambiar. Los navegadores llevan décadas mintiendo en ella por compatibilidad, y las extensiones de privacidad la falsean a propósito. Los números de pantalla son medidas reales; el nombre del navegador es una conjetura razonable, y por eso lo decimos así.
¿Qué significa que mi densidad de píxeles sea 2 o 3?
Que tu pantalla dibuja dos o tres puntos por cada píxel de los que usa una web para medir. Es lo que hace que el texto se vea nítido, y también lo que hace que una imagen subida al tamaño exacto se vea borrosa: hay que subirla al doble para que aproveche esos puntos.
¿Por qué el zoom es «estimado» y no un dato exacto?
Porque ningún navegador publica el nivel de zoom. Lo que sí se puede medir es la relación entre la ventana del navegador, que no cambia al ampliar, y el hueco donde cabe la página, que sí encoge: esa división da el zoom con un error de un par de puntos, porque la barra de desplazamiento y los bordes de la ventana no entran en las dos medidas por igual. Por eso el resultado se redondea al paso más cercano de los que ofrece el navegador —90, 100, 110, 125…— y por eso lo llamamos estimación. Si la cifra no es 100 %, lo relevante es eso, no el decimal.
¿Y el zoom de pellizco del móvil?
Ese sí es exacto y aparece como una fila aparte cuando lo hay. Son cosas distintas: el zoom de página cambia cuánto espacio cree tener la web y provoca que se reorganice; el pellizco solo amplía lo que ya está dibujado, como una lupa. Un móvil puede tener los dos a la vez.
¿Puedo usarlo para probar cómo se ve mi web en otros tamaños?
Para el tamaño que tengas delante, sí: cambia el tamaño de la ventana y verás los números moverse. Para simular un móvil de verdad, mejor usa las herramientas de desarrollo de tu navegador, que además fingen el puntero táctil y la densidad de píxeles del aparato.
Para entenderlo
Lo explicamos en el blog
¿Tu web se ve rara en algún tamaño?
Con estos datos y una captura solemos reproducir el problema a la primera. Y si lo que hace falta es que deje de pasar en todos los tamaños, eso ya es trabajo nuestro.
Respondemos en menos de 24 horas hábilesBogotá · UTC−5