Herramienta online gratuita de información de pantalla. Consulta resolución, DPI, relación de aspecto y profundidad de color. En el navegador.
Pulsa Ctrl+D para añadir esta página a marcadores
La herramienta de resolución de pantalla muestra la resolución, tamaño del viewport, DPR y profundidad de color de tu dispositivo.
DPR es el número de píxeles físicos por píxel CSS. Un DPR de 2 indica pantalla Retina, las imágenes deben ser 2x más grandes para verse nítidas.
La resolución es el total de píxeles físicos del monitor, mientras el viewport es el área visible del contenido en el navegador, excluyendo barras de herramientas.
Fijar los puntos de ruptura a nombres de dispositivos concretos garantiza que se rompan en cuanto salga uno nuevo. Corta, en cambio, donde la propia maqueta empieza a verse mal. En la práctica 480, 768, 1024 y 1280 px son puntos de partida habituales, pero son cifras fáciles de recordar, no reglas. Estrecha despacio la ventana del navegador y observa a qué ancho las líneas de texto se alargan demasiado o una tarjeta se aplasta: poner ahí el punto de ruptura resulta mucho más duradero.
Porque un píxel CSS es una unidad de tamaño aparente, no un punto físico. En una pantalla 4K con escalado al 200 %, 3840 puntos físicos se presentan como 1920 píxeles CSS, y eso es justo lo que hace que el texto y los iconos se vean más densos y nítidos. La relación de píxeles del dispositivo es entonces 2, así que para que las imágenes sigan siendo nítidas hay que entregar por srcset un archivo del doble del tamaño mostrado.