摘要：浏览器之三个viewport问题

layout viewport

Layout相当于一个画板，默认安卓为980px,貌似ios也为980px,这里的px为逻辑像素。

visual viewport

visual viewport相当于一个窗子，这个窗子可以放大缩小，也可以左右平移。当手指触摸屏幕放大的时候，visual viewport缩小，而手机屏幕不会变，所以手机上的字体会变大。当手指触摸屏幕缩小时，visual viewport放大，而手机屏幕不会变，所以手机上的字体会变小。

至于网上所说的window.innerWidth表示的是visual viewport的大小，实验并没有观测到会随缩放而变。

也有人说window.pageX/YOffset是visual viewport相对于layout viewport的偏移，这个实验可以观测到。

代码如下：


<html>
<head>
<meta name="viewport" content="width=device-width,user-scalable=0">
<style type="text/css">
body {
  font-size: 10px;
}
</style>

<script>
function a()
{
alert("浏览器中的layout viewport"+document.documentElement.clientWidth);
alert("浏览器中visual viewport:" + window.innerWidth);
alert("浏览器中DPR"+ window.devicePixelRatio);
alert("浏览器中字体的值"+window.getComputedStyle(document.body).getPropertyValue('font-size'));
}
</script>

</head>
<body>
hhhh
<button onclick="a()">here</button>
</body>
</html>

ideal viewport

ideal viewport相当于一个定值，等于device-width,device-width的值等于逻辑像素的宽。

浏览器对layout viewport的处理

浏览器相当于把layout viewport这块画板直接装进浏览器里，所以在相同px下content属性中

<meta name="viewport" content="width=400">

中的width的值越大，html中的字体越小

meta标签做了什么

<meta name="viewport" content="width=device-width,initial-scale=1.0">

width=device-width:会设置layout viewport画板的宽度为device-width。
initial-scale=1.0:会设置初始缩放的比例是1，会将视觉视口和布局视口设置为缩放后的尺寸。而缩放的尺寸就是基于逻辑像素的宽度来的，也就起到了和width=device-width同样的效果。

initial-scale=1.0,layout viewport等于逻辑像素。
initial-scale=0.5,layout viewport等于逻辑像素的2倍。

dpr和layout viewport关系

dpr是高清屏，例如vivo y85a,宽是1080，dpr为3，那么逻辑像素就是360，浏览器知道这部手机有360个像素，浏览器会把一个layout viewport装进这360个像素中，这360个像素会由系统按照1个css逻辑像素对应3个物理像素（DPR为3）进行放大。所以layout viewport越大，浏览器字体就越小。

引申以下：因为dpr会放大可能导致字体不清晰，理论上一个layout viewport中的像素对应一个物理像素最为清晰。
所以如果dpr=2,理论上，应该设initial-scale=0.5,即layout viewport等于2倍的逻辑像素，这样刚好layout viewport中的一个像素对应手机上一个真实存在的物理像素。


<html>
<head>
<meta name="viewport" content="width=500,user-scalable=0">
<script>
function a()
{
alert("layout viewport"+document.documentElement.clientWidth);
alert("visual viewport:" + window.innerWidth);
alert("DPR"+ window.devicePixelRatio);
alert("字体大小"+window.getComputedStyle(document.body).getPropertyValue('font-size'));
}
</script>
<style type="text/css">
*{
     margin:0;
      padding:0;
     box-sizing:border-box;
}

div.left{
       height:700px;
        width:100%;
        background:red;
}

</style>
</head>

<body>

<div class="left">sssssfffff</div>

<button onclick="a()">here</button>

</body>
</html>

以下未经实验验证：
有人说视觉窗口会随用户的缩放变化，但并没有在谷歌手机浏览器上观察到变化。

文章目录

keepnight

浏览器之三个viewport问题