Cómo usar: Resolución de pantalla
- Abre la página: los valores aparecen al instante.
- Redimensiona la ventana o gira tu teléfono para ver cómo cambia el viewport.
- Copia los datos para compartirlos en un informe de error.
Resolución de pantalla vs viewport
- Resolución de pantalla es el tamaño de toda la pantalla en píxeles CSS (
screen.width × screen.height). - Viewport es el área de la ventana del navegador disponible para la página (
innerWidth × innerHeight); es lo que usan las media queries de CSS. - Device pixel ratio (DPR) es el número de píxeles físicos por cada píxel CSS. Un teléfono con DPR 3 y un viewport de 390 píxeles de ancho tiene en realidad 1170 píxeles físicos de lado a lado.
Tamaños de pantalla habituales
| Tipo de dispositivo | Viewport CSS | DPR |
|---|---|---|
| iPhone moderno | 390–430 × 844–932 | 3 |
| Teléfono Android | 360–412 × 780–915 | 2.6–3.5 |
| iPad | 768–1032 × 1024–1376 | 2 |
| Portátil | 1280–1536 × 720–960 | 1–2 |
| Monitor Full HD | 1920 × 1080 | 1 |
| Monitor 4K (escalado) | 1920–2560 × 1080–1440 | 1.5–2 |
Por qué los números parecen “incorrectos”
Los sistemas operativos escalan la pantalla: una pantalla 4K al 150 % de escala informa 2560 × 1440 píxeles CSS con DPR 1.5. El zoom del navegador también cambia el DPR: al 200 % el viewport se reduce a la mitad. Es el comportamiento esperado, no un error.
Para desarrolladores
Diseña con píxeles CSS y prueba los anchos de viewport más comunes (360, 390, 768, 1024, 1280, 1536). Sirve imágenes nítidas a pantallas de DPR alto con srcset y redimensiónalas con el redimensionador de imágenes. La tipografía fluida con la calculadora de clamp() evita por completo los breakpoints en los tamaños de fuente.
También se busca como: mi resolución de pantalla, tamaño de pantalla, tamaño del viewport, cuál es mi resolución, device pixel ratio, tamaño de ventana del navegador, comprobar resolución de pantalla.
Herramientas que combinan con: Resolución de pantalla
- ¿Cuál es mi IP? — Tu dirección IP pública y toda la información que tu navegador revela a las páginas web que visitas: agente de usuario, resolución de pantalla, idioma, zona horaria y encabezados de solicitud.
- Analizador User Agent — Descifra cualquier cadena User-Agent y averigua el navegador, el motor, el sistema operativo y el dispositivo, además de si pertenece a un buscador, a un rastreador de IA o a un script.
- Calculadora de relación de aspecto — Redimensiona imágenes y videos sin distorsión: indica una proporción y un lado para obtener el otro, o introduce un tamaño para averiguar su proporción, con el CSS listo para pegar.
- Convertidor PX a REM — Convierte entre píxeles, rem y em con tu propio tamaño de fuente raíz, o pega una hoja de estilos completa y convierte todos los valores px de una vez.
Preguntas frecuentes
¿Por qué mi monitor 4K muestra una resolución menor?
Por el escalado de pantalla: Windows y macOS agrandan todo, así que el navegador informa el tamaño escalado en píxeles CSS. Multiplícalo por la densidad de píxeles del dispositivo para obtener la resolución física.
¿Cuál es la diferencia entre el tamaño de pantalla y el viewport?
El viewport no incluye las barras de herramientas, las pestañas ni los bordes de la ventana del navegador: es el espacio que realmente recibe la página web.
¿Se envía esta información a algún sitio?
No. Tu navegador la lee y solo se muestra en esta página.
¿Puedo instalar Resolución de pantalla como aplicación web y utilizarla sin conexión?
Sí. Resolución de pantalla es una aplicación web instalable (PWA): se instala desde el navegador, no se descarga desde una tienda de aplicaciones. Haz clic en «Instalar aplicación» en la parte superior de esta página en Chrome o Edge (Windows, macOS, Linux, ChromeOS) o, en Android, utiliza «Compartir» → «Añadir a la pantalla de inicio» en iPhone y iPad, o «Archivo» → «Añadir al Dock» en Safari 17+ en un Mac. A continuación, se abrirá en su propia ventana con su propio icono y, como se ejecuta íntegramente en tu navegador, seguirá funcionando sin conexión. Firefox en el ordenador de sobremesa no permite instalar aplicaciones web. Cómo funciona la instalación.