Pensé que devolvía el tamaño máximo que podia tener el viewport, pero al asignarle al height
de un elemento el valor de window.screen.availHeight
es incluso mas grande que el viewport
en cuanto al alto.
1 respuesta
Propiedad innerHeight
- Esta obtiene la cantidad de pixeles que de forma vertical tiene disponibles en viewport que es el espacio visible de tu navegador web (pero que no representa necesariamente el 100% del espacio disponible que la página web tiene para mostrar todos sus elementos)
Ejemplo
Si con el navegador a pantalla completa ejecuto:
window.innerHeight
Obtengo 624
Que representan los pixeles verticales que posee el viewport
En cambio si redimensiono y dejo a la mitad mi navegador de forma vertical obtendré: 312 que serán ahora pos pixeles disponibles que tiene el viewport para mostrar el contenido de la página web
Propiedad availHeight
- Esta obtiene el tamaño total en pixeles que posee la pantalla en dirección vertical, no importa si redimensionas el navegador la medida será una y no cambiará.
Ejemplo
let altoTotal = window.screen.availHeight
let anchoTotal = window.screen.availWidth
console.log(`Tu pantalla mide de alto: ${altoTotal} y de ancho ${anchoTotal}`)
Que en mi caso particular da como resultado:
"Tu pantalla mide de alto: 724 y de ancho 1366"
Referencias