chrome浏览器,手机模式iphone6下,
在页面里加了这句话
<meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5">
这时候用window.innerWidth和document.documentElement.clientWidth两种获取到的都是750,
但是把所有scale改成2的时候,window.innerWidth获取到的是188,而document.documentElement.clientWidth获取到的还是375。
所以,这是什么原因呢?
有三种viewport:
① 可视视口(visual viewport) = window.innerWidht = Window.visualViewport.widht;
② 布局视口(layout viewport) = document.documentElement.clientWidth;
③ 理想视口(ideal viewport),比如iphone6的分辨率为375×667,则理想视口宽度为375px;
像素比 = 理想视口 / 可视视口
布局视口 = Max(理想视口,可视视口)
可以看到把所有scale改为2时,可视视口为188px,布局视口为375px.
应该(我猜)是这样吧.