Cuál es mi resolución de pantalla
¿Qué resolución tiene mi pantalla y cuánto espacio recibe realmente una página web dentro de la ventana del navegador? Todos los valores se miden directamente en tu navegador y se actualizan en vivo al cambiar el tamaño de la ventana, hacer zoom o girar tu dispositivo.
Fuente: MDN Web Docs – Screen. Actualizado: .
Cómo se calcula
Hay más de una respuesta correcta a «cuál es mi resolución de pantalla»: los píxeles físicos de la pantalla, los píxeles CSS con los que trabaja el navegador, y el viewport, el área que realmente recibe una página web. Esta herramienta los muestra todos, uno junto a otro.
Cómo saber la resolución de pantalla
- Abre esta página: la resolución en píxeles físicos y en píxeles CSS aparece al instante.
- Cambia el tamaño de la ventana, haz zoom o gira el dispositivo: viewport, zoom y breakpoint se actualizan en vivo.
- Lee el devicePixelRatio, la relación de aspecto y el área disponible sin la barra de tareas.
Ejemplo: un portátil de 1920 × 1080 píxeles con escala de Windows al 125 % devuelve, con el zoom del navegador al 100 %, un devicePixelRatio de 1,25. En píxeles CSS son 1920 ÷ 1,25 = 1536 y 1080 ÷ 1,25 = 864, es decir, 1536 × 864.
Qué significan los valores
- Píxeles físicos: tamaño de pantalla en píxeles CSS × devicePixelRatio. Un portátil Full HD con escalado al 125 % informa 1536 × 864 píxeles CSS; × 1,25 da los 1920 × 1080 reales.
- devicePixelRatio: cuántos píxeles físicos forman un píxel CSS. 1 = monitor clásico, 2 o 3 = pantalla Retina o de teléfono. Tanto el zoom del navegador como el escalado de pantalla de Windows cambian este valor.
- Disponible: la pantalla menos la barra de tareas o el Dock.
- Viewport: el tamaño interior de la ventana del navegador (
innerWidth × innerHeight); a esto responden las media queries y los diseños adaptables. El área visible (visual viewport) es más pequeña en teléfonos cuando haces zoom con dos dedos o el teclado está abierto. - Relación de aspecto: reducida de forma exacta (1920 × 1080 = 16:9) y, para valores atípicos, el nombre habitual (1366 × 768 ≈ 16:9).
- Breakpoint: qué nivel de Bootstrap 5 (sm desde 576, md desde 768, lg desde 992, xl desde 1200, xxl desde 1400 px) y de Tailwind CSS (sm desde 640, md desde 768, lg desde 1024, xl desde 1280, 2xl desde 1536 px) se aplica con el ancho actual de la ventana.
Resoluciones habituales
| Nombre | Píxeles | Relación |
|---|---|---|
| HD (720p) | 1280 × 720 | 16:9 |
| HD / WXGA | 1366 × 768 | ≈ 16:9 |
| Full HD (1080p) | 1920 × 1080 | 16:9 |
| WUXGA | 1920 × 1200 | 16:10 |
| QHD / WQHD (1440p) | 2560 × 1440 | 16:9 |
| UWQHD | 3440 × 1440 | ≈ 21:9 |
| 4K UHD | 3840 × 2160 | 16:9 |
Límites
A veces los navegadores redondean los píxeles CSS hacia abajo, así que los píxeles físicos pueden variar en uno (2561 en vez de 2560). Con varios monitores, el navegador informa la pantalla en la que está la ventana en ese momento. Firefox con la protección contra fingerprinting activada (resistFingerprinting) puede informar deliberadamente valores estándar.
Más comprobaciones: navegador y sistema con cuál es mi user agent, dirección pública con cuál es mi dirección IP y medidas de imagen con la calculadora de relación de aspecto.
Preguntas frecuentes
¿Cómo averiguo mi resolución de pantalla?
Basta con abrir esta página: la resolución en píxeles físicos aparece arriba, seguida de los valores en píxeles CSS y el tamaño de tu ventana del navegador. En Windows también la encuentras en Configuración → Sistema → Pantalla → Resolución de pantalla.
¿Por qué mi navegador muestra 1536 × 864 en vez de 1920 × 1080?
Porque Windows está escalado al 125 % (o el zoom del navegador no está al 100 %). El navegador entonces trabaja en píxeles CSS: 1920 ÷ 1,25 = 1536. Los píxeles físicos se muestran arriba: son los píxeles CSS × devicePixelRatio.
¿Cuál es la diferencia entre resolución de pantalla y viewport?
La resolución de pantalla es el tamaño de toda la pantalla. El viewport es solo el área interior de la ventana del navegador, sin la barra de pestañas, la barra de direcciones ni la barra de tareas. Para el diseño web y las media queries, lo que cuenta es el viewport.
¿Qué significa un devicePixelRatio de 2 o 3?
Tu pantalla es de alta densidad (Retina): un píxel CSS está formado por 2 × 2 o 3 × 3 píxeles físicos. El texto y las imágenes se ven más nítidos, mientras que los diseños mantienen el mismo tamaño.
¿Se guardan mis datos?
No. Todos los valores se leen y se muestran solo en tu navegador; nada se envía ni se guarda.
Fuentes y base legal
- MDN Web Docs – Screen
- MDN Web Docs – Window.devicePixelRatio
- MDN Web Docs – Visual Viewport API
- MDN Web Docs – prefers-color-scheme
- Bootstrap 5.3 – Breakpoints
- Tailwind CSS – Responsive design
Última actualización: · Principios editoriales
Herramientas relacionadas
- Cuál es mi user agentDescubre tu cadena de user agent y detecta navegador, versión, motor, SO y tipo de dispositivo, con Client Hints. Analiza cualquier otra. Local.
- Cuál es mi dirección IPMuestra al instante tu dirección IP pública, detecta si es IPv4 o IPv6 y explica la diferencia. Gratis: tu IP no se guarda.
- Test de cámara web: probar tu cámaraProbar cámara web gratis en tu navegador: imagen en vivo, resolución y fotogramas reales, de 480p a 4K, modo espejo y foto. No se sube ni se guarda nada.
- Test de teclado: ¿funcionan todas las teclas?Test de teclado online gratis: cada tecla que pulsas se ilumina y queda marcada como probada. Muestra key, code y comprueba ghosting.
- Calculadora de subredes IPv4: red, broadcast y rango de hostsCalculadora de subredes IPv4 con CIDR: dirección de red, broadcast, rango de hosts, máscara, wildcard y número de hosts, en binario y con subnetting.
- Minificar JavaScriptMinificar JavaScript: quita comentarios y espacios, reduce el código y mira el ahorro en bytes. En el navegador, sin subir nada.
- Resaltado de sintaxisResaltado de sintaxis online: pega código, elige colores para JavaScript, JSON, HTML, CSS, SQL, Python o Bash y copia el HTML listo para blog, correo o Word.
- Calculadora CSS clampCalculadora CSS clamp para tamaños de fuente y espaciados fluidos: introduce valor mínimo, máximo y rango de viewport y copia el clamp() ya hecho.
- Validar CUIT y CUIL: comprobá el dígito o calculalo con el DNIValidar CUIT o CUIL online: pegá las 11 cifras y comprobá el dígito verificador, o escribí el DNI y el sexo y calculá el CUIL con el método módulo 11.