问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

document.documentElement.clientWidth 为什么有时候会获取到0

头像
meta
    17115

    移动端项目，需要通过js设置1rem是多少像素，但是获取设备宽度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>
    移动端javascript
    阅读 10k
    2 个回答
    得票最新
    头像
    阿蛇
      3k31733

      问题复现

      没有qq浏览器，ie浏览器，把内核调到ie5，问题出现
      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

      头像
      redtwodog
        21
        新手上路，请多包涵

        我现在也遇到这个问题了，不是QQ浏览器。而是公司APP的webview，奇怪的是。只有其中一个页面会出现这个情况。我也很纳闷。

        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题
        宣传栏