Nanobanana
116 字
1 分鐘
手機網頁100vh v.s. 網址列
來源:https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
在 JavaScript 中,可以通過使用 window.innerHeight 來取得目前顯示畫面的值。該值會包含瀏覽器的界面,並會隨著介面變化去做更新。所以此次的訣竅,是將 window.innerHeight 值存在 CSS 變數中,並將該值用來取代 vh 的基本單位。
CSS
#map { height: calc(100vh - 84px); height: calc((var(--vh, 1vh) * 100) - 84px);}JavaScript
let vh = window.innerHeight * 0.01;// Then we set the value in the --vh custom property to the root of the documentdocument.documentElement.style.setProperty("--vh", `${vh}px`); 手機網頁100vh v.s. 網址列
https://geminixiang.xyz/posts/mobile-web-100vh-vs-address-bar/