meta里的viewport设置的一点疑问

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。
所以,这是什么原因呢?

阅读 1.3k
1 个回答
新手上路,请多包涵

有三种viewport:
① 可视视口(visual viewport) = window.innerWidht = Window.visualViewport.widht;
② 布局视口(layout viewport) = document.documentElement.clientWidth;
③ 理想视口(ideal viewport),比如iphone6的分辨率为375×667,则理想视口宽度为375px;
像素比 = 理想视口 / 可视视口
布局视口 = Max(理想视口,可视视口)
可以看到把所有scale改为2时,可视视口为188px,布局视口为375px.
应该(我猜)是这样吧.

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题