polyshComprobador de tamaño del viewport
El tamaño exacto del área de la página de tu navegador y el punto de corte que le corresponde.
- Funciona en tu navegador
- Sin subidas
- Sin cuenta
Cargando tu herramienta del navegador…
Qué hace Comprobador de tamaño del viewport
Los diseñadores web, los testers de QA y cualquiera que informe de un fallo de diseño necesitan el mismo dato: qué ancho tiene ahora mismo el área de la página del navegador. El titular lo muestra en píxeles CSS, la unidad que usan las media queries, y cambia en directo mientras arrastras el borde de la ventana.
La tabla separa el tamaño con y sin barras de desplazamiento, para que veas cuándo una barra vertical se come 15 o 17 píxeles. También muestra el viewport visual y el zoom con los dedos en los teléfonos, e indica en qué punto de corte estás, de teléfono a escritorio ancho. Para toda la pantalla en lugar de la ventana, usa el comprobador de resolución de pantalla.
Ejemplo
Tu equipo
Chrome en un MacBook, ventana de 1440 píxeles CSS de ancho, barras de desplazamiento superpuestas, relación de píxeles del dispositivo 2
El informe muestra
Tu viewport: 1440 × 813 Píxeles CSS · Muy grande (1280–1535 px, escritorio) Ancho de la barra de desplazamiento: 0 px Viewport en píxeles del dispositivo: 2880 × 1626
macOS oculta las barras de desplazamiento hasta que te desplazas, así que no ocupan ancho. En Windows, la misma ventana suele mostrar una barra de unos 15 px.
Cómo usar Comprobador de tamaño del viewport
- Abre la página en el navegador y la ventana que quieras medir.
- Cambia el tamaño de la ventana y observa cómo se actualizan el tamaño y el punto de corte.
- Haz clic en Copiar para añadir las cifras a un informe de errores.
Conviene saber
- Los nombres de los puntos de corte siguen los valores predeterminados habituales en 640, 768, 1024, 1280 y 1536 px. El CSS de tu sitio puede cambiar de diseño en otros anchos.
- Esto mide el área de la página, no la ventana exterior con las pestañas y la barra de herramientas. Las herramientas para desarrolladores acopladas también restan espacio al viewport.
- El zoom del navegador cambia el viewport en píxeles CSS: una ventana de 1440 px con un zoom del 125 % indica 1152 px.
Preguntas sobre Comprobador de tamaño del viewport
¿Qué tamaño tiene la ventana de mi navegador?
El titular muestra el área de la página de esta ventana en píxeles CSS, primero el ancho. Es el tamaño que ven las páginas web y el que captura una grabación de pestaña. Cambia el tamaño de la ventana y la cifra cambia al instante.
¿Qué diferencia hay entre el viewport y la resolución de pantalla?
La resolución de pantalla es toda la pantalla. El viewport es solo la parte de la ventana del navegador donde se dibuja la página, descontando la barra de direcciones, las pestañas y el marco de la ventana. En un portátil, el viewport suele ser unos cientos de píxeles más bajo que la pantalla.
¿Con qué tamaños de viewport debo probar mi sitio?
Cubre un ancho de teléfono de unos 375 a 430 px, una tableta de unos 768 px, un portátil de unos 1280 a 1440 px y un escritorio ancho de 1920 px. Prueba los anchos justo por debajo de cada uno de tus puntos de corte, porque los diseños suelen romperse justo antes de cambiar.
¿Por qué cambia el viewport cuando se abre el teclado en el móvil?
Los teclados en pantalla tapan parte de la página. Los navegadores reducen el viewport visual al área que sigue a la vista, mientras que el viewport de diseño a menudo no cambia; por eso los encabezados y pies fijos pueden dar saltos.