鍍金池/ 問答/HTML5  HTML/ meta里的viewport設(shè)置的一點疑問

meta里的viewport設(shè)置的一點疑問

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.
應(yīng)該(我猜)是這樣吧.

2017年2月15日 04:12