Tamaño de pantalla

¿Qué tamaño tiene mi pantalla?

Diseñadores, desarrolladores y equipos de soporte necesitan saber a menudo el tamaño exacto de una pantalla. ¿Qué resolución tienen los visitantes? ¿Qué ancho tiene esta ventana? ¿Por qué se rompe este diseño en mi móvil? Esta página lee lo que informa tu navegador y lo muestra en un solo sitio, y se actualiza al cambiar el tamaño de la ventana, para que veas cambiar los números.

Qué significa cada valor

• Ventana del navegador (viewport): el ancho y el alto del área donde se dibuja la página, en píxeles CSS. Es el número al que reaccionan los diseños adaptables.
• Tamaño de la pantalla: la resolución de tu monitor o móvil tal como se informa a las páginas web, también en píxeles CSS.
• Densidad de píxeles: cuántos píxeles físicos hay por cada píxel CSS. En muchos móviles y portátiles es 2 o 3, por eso las imágenes necesitan más resolución para verse nítidas.
• Píxeles físicos: el tamaño de la pantalla multiplicado por la densidad, una estimación de la resolución nativa.
• Área útil: la pantalla menos barras como la barra de tareas o el dock.

Puntos de ruptura

Los diseños adaptables cambian de aspecto a ciertos anchos, conocidos como puntos de ruptura. La herramienta muestra en qué punto de ruptura está tu ventana para dos frameworks populares, Tailwind (sm 640, md 768, lg 1024, xl 1280, 2xl 1536) y Bootstrap (sm 576, md 768, lg 992, xl 1200, xxl 1400). Es una forma práctica de comprobar por qué un diseño se ve como se ve a un tamaño dado.

Otros datos útiles

También ves la orientación, la profundidad de color, si el dispositivo tiene pantalla táctil y puede pasar el cursor, si en el sistema está elegido un esquema de color oscuro o el movimiento reducido, y el idioma del navegador. Estos ajustes afectan a cómo deben comportarse los sitios, y son útiles cuando alguien informa de que una página se ve mal en su dispositivo.

Privado y sencillo

La herramienta solo lee los valores que puede ver cualquier página web, y no se envía nada a un servidor ni se guarda. El tamaño de pantalla que se muestra es lo que informa el navegador, que puede diferir del tamaño físico del dispositivo o de la resolución fijada en el sistema si la página tiene zoom o la pantalla está escalada.