腾讯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/