移动端页面为何clientWidth 与 window.innerWidth 返回的值是相同的

发布于 2022-09-11 14:53:27 字数 2351 浏览 26 评论 0

为了弄清楚viewport相关的知识我做了个测试页面，并且没有在其中放入任何的meta标签。

按理，由于手机端屏幕太小，浏览器会建立个虚拟的layout viewport，宽度会大于浏览器屏幕宽度以便能尽量正常显示所有网页内容（一般是980px），并按这个对页面进行排版，这个值一般通过document.documentElement.clientWidth获取。

同时，我们还需要获得浏览器可视区域的大小，按照介绍一般是通过window.innerWidth来获得（实际发现screen.width也可以）。

但是实际操作后发现，在上述情况下（不加任何meta标签控制viewport相关属性），window.innerWidth的值与document.documentElement.clientWidth的值都是相等的980px，而不是一个大一个小，请问这个是为什么捏？

我的页面结构如下:

<!DOCTYPE html>
<html lang="en" style="font-size: 50px;">
<head>
    <meta charset="utf-8"/>
    <title>Viewport test</title>
</head>
<style>
    html,body{
        width: 100%;height: 100%;
    }
</style>
<body>
    <h1>Viewport test !</h1>
    <div id="div1">
        <div id="div2"><label id="label" onclick="testFn()">test element from point</label></div>
        ppk大神对于移动设备上的viewport有着非常多的研究（第一篇，第二篇，第三篇），有兴趣的同学可以去看一下，本文中有很多数据和观点也是出自那里。ppk认为，移动设备上有三个viewport。
        首先，移动设备上的浏览器认为自己必须能让所有的网站都正常显示，即使是那些不是为移动设备设计的网站。但如果以浏览器的可视区域作为viewport的话，因为移动设备的屏幕都不是很宽，所以那些为桌面浏览器设计的网站放到移动设备上显示时，必然会因为移动设备的viewport太窄，而挤作一团，甚至布局什么的都会乱掉。也许有人会问，现在不是有很多手机分辨率都非常大吗，比如768x1024，或者1080x1920这样，那这样的手机用来显示为桌面浏览器设计的网站是没问题的吧？前面我们已经说了，css中的1px并不是代表屏幕上的1px，你分辨率越大，css中1px代表的物理像素就会越多，devicePixelRatio的值也越大，这很好理解，因为你分辨率增大了，但屏幕尺寸并没有变大多少，必须让css中的1px代表更多的物理像素，才能让1px的东西在屏幕上的大小与那些低分辨率的设备差不多，不然就会因为太小而看不清。所以在1080x1920这样的设备上，在默认情况下，也许你只要把一个div的宽度设为300多px（视devicePixelRatio的值而定），就是满屏的宽度了。回到正题上来，如果把移动设备上浏览器的可视区域设为viewport的话，某些网站就会因为viewport太窄而显示错乱，所以这些浏览器就决定默认情况下把viewport设为一个较宽的值，比如980px，这样的话即使是那些为桌面设计的网站也能在移动浏览器上正常显示了。ppk把这个浏览器默认的viewport叫做 layout viewport。这个layout viewport的宽度可以通过 document.documentElement.clientWidth 来获取。
        然而，layout viewport 的宽度是大于浏览器可视区域的宽度的，所以我们还需要一个viewport来代表 浏览器可视区域的大小，ppk把这个viewport叫做 visual viewport。visual viewport的宽度可以通过window.innerWidth 来获取，但在Android 2, Oprea mini 和 UC 8中无法正确获取。
    </div>
</body>
<script>
  console.log('Hello world');
  window.onload = function () {
    alert('screen width:' + screen.width + ',' + 'clientWidth:' + document.documentElement.clientWidth + ',innerWidth:' + window.innerWidth)
  }
</script> 
</html>

参考博文：移动前端开发之viewport的深入理解 - 无双 - 博客园

分享到QQ

分享到微博