116 字
1 分鐘
手機網頁100vh v.s. 網址列
2022-08-17
Ying Xiang Zhao
Ying Xiang Zhao

來源: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 document
document.documentElement.style.setProperty("--vh", `${vh}px`);
手機網頁100vh v.s. 網址列
https://geminixiang.xyz/posts/mobile-web-100vh-vs-address-bar/
作者
Ying Xiang Zhao
發佈於
2022-08-17
許可協議
CC BY-NC-SA 4.0