¿Cuál es la resolución de mi pantalla? Viewport, DPR y breakpoints | We.Inc
Mira en vivo la resolución de tu pantalla, el tamaño del viewport del navegador y el device pixel ratio, además de en qué breakpoint de Tailwind y Bootstrap estás y una tabla de tamaños de dispositivos comunes.
La resolución de tu pantalla aparece en el primer recuadro de esta página, medida por tu navegador al cargarla. Se indica en píxeles CSS; multiplícala por el device pixel ratio para obtener los píxeles físicos. La página también muestra el viewport de tu navegador, que es el tamaño que recibe realmente tu sitio web, y se actualiza en vivo al redimensionar.
Qué significa cada número
Medida
Qué es
Pantalla
Toda la pantalla, en píxeles CSS
Viewport
El área visible de la página dentro de la ventana del navegador
Device pixel ratio
Píxeles físicos por píxel CSS (2 o 3 en la mayoría de teléfonos)
Resolución física
El tamaño de pantalla multiplicado por el pixel ratio
Tamaño de pantalla, tamaño del viewport, device pixel ratio, orientación y profundidad de color, leídos en vivo desde tu navegador. También te dice en qué breakpoint de Tailwind y Bootstrap cae la ventana actual, con media queries para copiar y una tabla de tamaños de dispositivos comunes.
Abre la página. Los números salen de los objetos screen y window de tu navegador, así que no se instala nada y no se envía nada a ninguna parte.
Redimensiona la ventana o gira el teléfono. El viewport, el breakpoint y la orientación se actualizan al momento.
Mira el panel de breakpoints para ver qué breakpoints de Tailwind y Bootstrap se aplican al ancho actual.
Copia una media query para cualquier breakpoint, o compara tus números con la tabla de dispositivos de abajo.
Diseña para anchos de viewport, no para resoluciones de pantalla. Una pantalla de 1920 píxeles puede mostrar una ventana de navegador de 1200 píxeles, y esa ventana es todo lo que recibe tu layout.
Prueba a 360 y 390 píxeles de ancho. Muchos teléfonos Android indican de 360 a 412 píxeles CSS y los iPhone recientes de 375 a 440, así que un layout que funcione a 360 cubre la mayoría de los teléfonos.
Sirve las imágenes al doble del tamaño al que se muestran, o usa srcset, para que se vean nítidas en pantallas con un pixel ratio de 2 o más.
El zoom del navegador cambia tanto el viewport como el pixel ratio. Si los números parecen raros, restablece el zoom con Ctrl+0 o Cmd+0 y vuelve a comprobarlo.
Preguntas frecuentes
¿Por qué la resolución de mi pantalla parece menor que la que indica mi monitor?
Los navegadores indican los tamaños en píxeles CSS. Cuando tu sistema operativo escala la pantalla, por ejemplo al 150% en un monitor 4K o en cualquier Mac Retina, un píxel CSS ocupa varios píxeles físicos. Multiplica el tamaño de pantalla por el device pixel ratio que aparece aquí para obtener la resolución física.
¿Qué diferencia hay entre el tamaño de pantalla y el tamaño del viewport?
El tamaño de pantalla es toda la pantalla. El tamaño del viewport es la parte de la ventana del navegador que muestra la página, sin la barra de direcciones, las pestañas, las barras de herramientas ni los paneles acoplados. Los sitios web se maquetan según el viewport, así que ese es el número que debes usar para el diseño responsive.
¿Qué es el device pixel ratio?
Es el número de píxeles físicos usados para dibujar un píxel CSS en cada dirección. Un ratio de 1 es una pantalla estándar, 2 es habitual en portátiles con pantallas de alta densidad y en tablets, y 3 es habitual en teléfonos. También cambia cuando haces zoom en la página.
¿Qué breakpoints debo usar para el diseño responsive?
Empieza con los valores por defecto de tu framework, que aparecen en esta página para Tailwind y Bootstrap, y añade un breakpoint allí donde tu propio contenido empiece a verse apretado o estirado. Los breakpoints deben seguir al contenido, no a dispositivos concretos.
¿Se guarda algo sobre mi dispositivo?
No. Los valores se leen en tu navegador y se muestran en la página. No se nos envían ni se guardan.
Píxeles CSS y píxeles físicos
Un píxel CSS es una unidad de longitud, no un punto de la pantalla. En un teléfono con un pixel ratio de 3, una caja de 100 por 100 píxeles CSS se dibuja con 300 por 300 píxeles físicos. Por eso un teléfono con un panel de 1179 píxeles de ancho dice a los sitios web que mide 393 píxeles: el navegador muestra una página que se lee a un tamaño cómodo y la dibuja con más detalle.
Para el layout solo importan los píxeles CSS. Para las imágenes también importan los píxeles físicos, porque una imagen exactamente tan ancha como su caja en píxeles CSS se verá borrosa en una pantalla con un ratio de 2 o 3.
Los breakpoints en la práctica
Tailwind y Bootstrap son mobile first: los estilos sin prefijo se aplican en cualquier ancho y cada breakpoint añade reglas desde su ancho mínimo hacia arriba. md en Tailwind significa 768 píxeles o más, no solo tablets.
El panel de breakpoints de esta página mide el viewport igual que lo hacen las media queries de esos frameworks, así que lo que muestra es el conjunto de clases que estarían activas en esta ventana ahora mismo.
Breakpoints min-width por defecto en Tailwind CSS y Bootstrap 5
Framework
Breakpoint
Se aplica desde
Tailwind CSS
Tailwind CSS
Tailwind CSS
Tailwind CSS
Tailwind CSS
Bootstrap 5
Bootstrap 5
Bootstrap 5
Bootstrap 5
Bootstrap 5
Tamaños de viewport de dispositivos comunes en píxeles CSS (vertical), con pixel ratio y píxeles físicos
Tipo
Dispositivo o ajuste
Viewport (px CSS)
Pixel ratio
Píxeles físicos
Teléfono
iPhone SE (2.ª y 3.ª gen.)
Teléfono
iPhone 13 y 14
Teléfono
iPhone 15 y 16
Teléfono
iPhone 16 Pro
Teléfono
iPhone 15 Plus y 16 Plus
Teléfono
iPhone 16 Pro Max
Teléfono
Samsung Galaxy S24
Teléfono
Google Pixel 8
Tablet
iPad mini (6.ª gen.)
Tablet
iPad (10.ª gen.)
Tablet
iPad Pro de 11 pulgadas (4.ª gen.)
Tablet
iPad Pro de 12.9 pulgadas
Portátil
Portátil HD
Portátil
Full HD con escalado al 125%
Portátil
MacBook Air de 13 pulgadas (M2, por defecto)
Escritorio
Monitor Full HD
Escritorio
Monitor QHD
Escritorio
Monitor 4K con escalado al 150%
Vertical
Horizontal
Copiar media query de {name}
Pantalla {sw}×{sh} (física {pw}×{ph}), viewport {vw}×{vh}, device pixel ratio {dpr}
Tu pantalla ahora mismo
Resolución de pantalla (px CSS)
Relación de aspecto {ratio}
Resolución física
Pantalla × device pixel ratio
Viewport del navegador
El área en la que se maqueta tu página
Device pixel ratio
Cambia con el zoom del navegador
Pantalla disponible
Pantalla menos la barra de tareas o el dock
Orientación y color
{orientation}, {depth} bits
Pantalla táctil detectada
No se detectó pantalla táctil
Copiar estos números
Leyendo tu pantalla. Esto necesita JavaScript.
En qué breakpoint estás
Medido sobre el ancho del viewport{width}. Redimensiona la ventana para verlo cambiar.