腾讯X5内核获取窗口宽度
使用rem自适应

腾讯X5内核获取窗口宽度

测试环境：微信版本，6.3.27

window.innerWidth

在body之前使用 

window.innerWidth

获取窗口宽度是 980
在一定时间后(暂时不确定是什么时候)，获取到的才是正确的值
如将viewport 设置为 width=640
则在一定时间后获取到的才是640
导致在使用rem适配的时候，通过window.innerWidth算出来的值有问题。

document.documentElement.clientWidth

在body标签之前获取到的已经是正确的。
改用document.documentElement.clientWidth作为判断依据

在同时使用两种方法获取时

  • 情况1

    1
    2
    3
    4
    5
    6
    7
    <script>
        var ww = window.innerWidth;
        var cw = document.documentElement.clientWidth;
        //ww => 980
        //cw => 正常值
    </script>
    <body></body>

  • 情况2

    1
    2
    3
    4
    5
    6
    7
    <script>
        var cw = document.documentElement.clientWidth;
        var ww = window.innerWidth;
        //cw => 正常值
        //ww => 正常值
    </script>
    <body></body>

在同时使用两种方法时，window.innerWidth的值与先后有关系。

其他浏览器

window.innerWidth

在body标签之前获取到的已经是正确的。

document.documentElement.clientWidth

在body标签之前获取到的已经是正确的。

本文地址： http://gehaiqing.com/2016/10/25/tx-x5-window-width/