在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

7. SpringBoot使用jms 聆聽連線錯誤處理

7. SpringBoot使用jms 聆聽連線錯誤處理

C++筆記 將函式當作參數傳遞

C++筆記 將函式當作參數傳遞

MTR04_0625

MTR04_0625


Comments