在Andriod手機上使用vh/dvh/sch/lvh計算高度無效的解決方法


Posted by Luna on 2024-10-23

APPLE手機

使用vh:失效
使用dvh/lvh/svh:成功

Android 手機

使用vh/dvh/svh/lvh:計算皆失效

終極解決方案(APPLE/Android通用)

使用window.innerHeight偵測頁面高度之後,再計算元件高度。

撰寫範例

console.log(window.innerHeight);

var camClass = document.querySelectorAll('.eleCamBk');
var camClassHeight = "" ;
if(document.body.clientWidth < 768){
    camClassHeight = window.innerHeight - 100 ;
    console.log(camClassHeight);
}else{
    camClassHeight = window.innerHeight - 124 ;
    console.log(camClassHeight);
}

var camClassHeightString = camClassHeight.toString() ;
console.log(camClass);

camClass.forEach(element => {
    element.style.height = camClassHeightString + "px"; // 設置為所需的高度
});

參考資料

H5浏览器上使用100vh的坑及解决办法


#css #javascript







Related Posts

[DAY01] 七天理解SOLID原則-概念篇

[DAY01] 七天理解SOLID原則-概念篇

CSS 常用語法 (Cascading Style Sheets)

CSS 常用語法 (Cascading Style Sheets)

淺談 Jamstack 架構

淺談 Jamstack 架構


Comments