鍍金池/ 問答/Android  HTML/ document.documentElement.clientWidth 為什么

document.documentElement.clientWidth 為什么有時候會獲取到0

移動端項目，需要通過js設(shè)置1rem是多少像素，但是獲取設(shè)備寬度document.documentElement.clientWidth在手機QQ聊天對話框中拿到的document.documentElement.clientWidth 偶爾為0。在真正的QQ瀏覽器中不會有問題。不知道手機QQ聊天對話框中的這個瀏覽器是什么鬼。

改為document.body.clientWidth 也會偶爾獲取到0

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>Document</title>
</head>
<body>
   <script>
        window.onload=function () {
            var remSize = document.documentElement.clientWidth
        }
</script> 
</body>
</html>
回答
編輯回答
愛礙唉

問題復(fù)現(xiàn)

沒有qq瀏覽器，ie瀏覽器，把內(nèi)核調(diào)到ie5，問題出現(xiàn)
document.documentElement.clientWidth一直為0

思路

用jQuery能不能解決這個問題呢，比如
$("body").width()
測試有效。
故而查看jQuery源碼

clipboard.png

可以看到它取元素的話

如果是window對象的話會去取document.documentElement.clientWidth
否則會去取document.body.scrollWidth和document.documentElement.clientWidth的較大值

方案

window.onload=function () {
    var width =Math.max(document.body.scrollWidth,document.documentElement.clientWidth);
    console.log(width);
}

clipboard.png

2018年7月2日 00:40
編輯回答
話寡

我現(xiàn)在也遇到這個問題了，不是QQ瀏覽器。而是公司APP的webview，奇怪的是。只有其中一個頁面會出現(xiàn)這個情況。我也很納悶。

2018年8月14日 14:09