Näkyvän viewportin korkeus CSS-muuttujana

Koko näytön web-sovelluksessa layoutin pitäisi mahtua siihen alueeseen, joka on juuri nyt näkyvissä. Mobiiliselaimessa tämä alue muuttuu, kun selaimen palkit liikkuvat tai näppäimistö avautuu. Erityisesti iOS:llä näppäimistö voi pienentää näkyvää viewportia niin, että näkymän alaosan sisältö jää muuten sen alle.

window.visualViewport.height kertoo näkyvän viewportin korkeuden CSS-pikseleinä. Kun arvoa seurataan resize-tapahtumissa, sovellus voi välittää mitan CSS:lle mukautettua layoutia varten.

function updateVisibleViewportHeight() {
  const height = window.visualViewport?.height ?? window.innerHeight;
  document.documentElement.style.setProperty("--vvh", `${height / 100}px`);
}

updateVisibleViewportHeight();
window.visualViewport?.addEventListener("resize", updateVisibleViewportHeight);
window.addEventListener("resize", updateVisibleViewportHeight);

Esimerkissä korkeus jaetaan sadalla ennen kuin se asetetaan --vvh-muuttujaan. Muuttuja vastaa silloin yhtä prosenttia näkyvän viewportin korkeudesta. CSS voi kertoa sen sadalla ja käyttää tulosta esimerkiksi koko näkymän vähimmäiskorkeutena:

.full-screen-view {
  min-height: calc(var(--vvh) * 100);
}

JavaScript huolehtii mittaamisesta, ja CSS määrittää, miten layout käyttää mittaa. Sama ajatus sopii PWA:n mobiililayoutiin, kun sisällön pitää reagoida näkyvän alueen muutoksiin.