Los números anteriores provienen directamente de las API Screen y window del navegador: ancho y alto lógico, alto disponible menos las barras de tareas donde se informe, profundidad de color, profundidad de píxeles, orientación y devicePixelRatio. Una vez reporté un error en un monitor ultrawide de 3440×1440 donde las capturas de pantalla promocionales usaban la resolución completa del panel, pero el componente principal leía window.innerWidthdespués de que el dock de las herramientas de desarrollo consumiera 400 px, por lo que el equipo de control de calidad pensó que el sitio "no era compatible" con ultrawides. A continuación, separo los píxeles físicos de los píxeles CSS, explico la escala y el zoom, y muestro cómo leer los mismos valores desde el sistema operativo cuando el navegador miente por política.
Píxeles físicos, píxeles CSS y devicePixelRatio
Los píxeles del dispositivo (píxeles físicos) son los puntos de hardware en su panel. Los píxeles CSS son el sistema de coordenadas que utiliza el diseño; un píxel CSS puede cubrir uno, dos o tres píxeles del dispositivo según window.devicePixelRatio(DPR). Los teléfonos de alta densidad (HiDPI) a menudo vienen con un DPR de 2 o 3 para que el texto siga siendo legible sin reducir la cuadrícula de diseño. Un "ancho CSS" de 390 en un iPhone no significa una pantalla de 390 píxeles de dispositivo de ancho.
Viewport es el área de diseño visible dentro del marco del navegador. Cambia cuando hace zoom, divide la ventana o abre el teclado en dispositivos móviles. screen.width está más cerca del modo informado por la pantalla; window.innerWidth rastrea el viewport de diseño en el que la página realmente dibuja.
Cómo detecta esta página las propiedades de la pantalla
El código del cliente lee screen.width, screen.height, screen.availWidth, screen.availHeight, screen.colorDepth, window.devicePixelRatio y screen.orientation.type donde estén disponibles. Algunos valores se redondean o limitan en navegadores orientados a la privacidad. Las máquinas virtuales y el escritorio remoto pueden informar la resolución de la sesión del invitado, no del monitor físico detrás del cristal.
Por qué el número del navegador no coincide con el de la caja del monitor
La escala del sistema operativo al 125%, 150% o 200% mapea las unidades lógicas de escritorio a menos píxeles físicos para mejorar la legibilidad de la interfaz de usuario. El zoom del navegador (Ctrl/Cmd + más) encoge el viewport CSS sin cambiar el hardware del monitor. Los modos de panel no nativos (como ejecutar 1080p en un panel 4K) informan el modo activo, no el máximo del panel. Los docks externos a veces anuncian el EDID incorrecto hasta que se actualiza el firmware.
Modos de pantalla comunes en 2026
| Nombre | Resolución típica | Relación de aspecto | Uso típico |
|---|---|---|---|
| 1080p (FHD) | 1920 × 1080 | 16:9 | Computadoras portátiles económicas, segundos monitores |
| 1440p (QHD) | 2560 × 1440 | 16:9 | Estándar de productividad en muchos escritorios |
| 4K UHD | 3840 × 2160 | 16:9 | Trabajo creativo, texto nítido a escala nativa |
| 5K (clase iMac) | 5120 × 2880 | 16:9 | Flujos de trabajo de edición de fotos y videos |
| 8K UHD | 7680 × 4320 | 16:9 | Gráficos de alta gama, señalización digital |
| Ultrawide de 21:9 (1440p de alto) | 3440 × 1440 | 21:9 | Interfaces de línea de tiempo, mesas de trading |
Verificación cruzada desde la configuración del sistema y la terminal
Cuando el navegador parezca dar datos incorrectos, confirme lo que el sistema operativo cree que está ejecutando el panel.
- Windows: Configuración → Sistema → Pantalla → Resolución de pantalla.
- macOS: Ajustes del Sistema → Pantallas → Resolución.
# Linux (X11 / muchas sesiones Wayland)
xrandr --query
# Hyprland
hyprctl monitorsRetina, HDR y por qué la accesibilidad supera al conteo bruto de píxeles
Apple popularizó el término Retina como estrategia de marketing para indicar un "DPR lo suficientemente alto como para que los píxeles individuales desaparezcan a una distancia de visualización normal." No es un parámetro de API separado; es un DPR alto más una tipografía optimizada. Los usuarios aumentan el texto con el zoom del navegador o la escala del sistema operativo; los puntos de ruptura (breakpoints) deben usar min-width en píxeles CSS y respetar prefers-reduced-motion en lugar de asumir un lienzo fijo de 1920.
Preguntas frecuentes
¿Cuál es la diferencia entre el tamaño de la pantalla y la resolución?
El tamaño es la diagonal física en pulgadas del panel. La resolución es la cuadrícula de píxeles (por ejemplo, 2560×1440). Dos monitores de 27 pulgadas pueden tener diferentes resoluciones y diferentes DPR bajo la escala del sistema operativo.
¿Qué significa la relación de píxeles del dispositivo (device pixel ratio)?
Es la relación entre los píxeles del dispositivo y los píxeles CSS. Un DPR de 2 significa que un píxel CSS se mapea a un cuadrado de 2×2 píxeles de dispositivo. Las imágenes rasterizadas necesitan dimensiones intrínsecas más altas para mantenerse nítidas en pantallas con DPR alto.
¿Por qué mi navegador muestra una resolución menor que mi monitor?
Probablemente esté leyendo innerWidth / innerHeight (viewport) o ejecutando la escala del sistema operativo. El ancho completo de la pantalla se acerca más a screen.width multiplicado por la relación entre los píxeles CSS y del dispositivo, sujeto también al zoom.
¿Qué es una pantalla Retina?
Es un término comercial para paneles de alta densidad de píxeles donde el texto y la interfaz se renderizan con suficiente densidad para que los píxeles no sean evidentes a una distancia de visualización típica. Técnicamente, sigue siendo hardware LCD u OLED con un DPR más alto.
¿Cómo cambio la resolución de mi pantalla?
Use la configuración de pantalla del sistema operativo descrita anteriormente. Elija la resolución nativa del monitor siempre que sea posible para obtener la imagen más nítida. Los juegos pueden anular la resolución de forma independiente del modo de escritorio.
Herramientas relacionadas
Cadenas de GPU y WebGL: Cuál es mi WebGL / GPU. Nombre y motor del navegador: Cuál es mi navegador. Cadena de User Agent sin procesar: Cuál es mi agente de usuario.
Fuentes citadas anteriormente
- Módulo de vista CSSOM: viewport y dimensiones de la ventana
- MDN: Screen (Pantalla)
- Media Queries Nivel 5: variables de entorno como safe-area-inset