Cómo detectar el tamaño útil de la ventana del navegador (viewport) con Javascript

Estoy intentando calcular el tamaño de la ventana del navegador. Encuentro la solución de usar window.screen que tenéis en el artículo de detectar resolución. Pero no es eso lo que necesito.

Necesito saber el tamaño del viewport con Javascript. No se trata de la pantalla del usuario ni del documento completo (porque podría haber scroll). Sería solamente saber el espacio disponible que hay en la pantalla del navegador para el documento HTML.

Espero que me explique bien. Gracias

Editar

Responder la pregunta

Victor

302 8 21 17

Para saber qué dimensiones tiene el área disponible para el documento HTML Lo que necesitas es:

window.innerWidth
window.innerHeight

window.innerWidth te indicará el tamaño del viewport en la anchura
window.innerHeight para conseguir el tamaño del viewport en la altura

Efectivamente, con window.screen consigues más bien las dimensiones del monitor, que no tiene nada que ver con el viewport.

let anchuraViewport = window.innerWidth;
let alturaViewport = window.innerHeight;

Ten en cuenta que este área puede ser totalmente distinta del área del documento, por que el documento a veces es muy pequeño y no ocupa todo el espacio de la ventana del navegador o justo por lo contrario, porque no quepa todo el contenido de la página.

Luis

174 5 6 3

Cómo detectar el tamaño útil de la ventana del navegador (viewport) con Javascript

Respuestas