一、viewport概念:viewport就是設備的屏幕上能用來顯示咱們的網頁的那一塊區域.css
viewport的默認值980px或1024px等,如下是瀏覽器的默認viewport寬度 html
二、css中的1pxweb
devicePixelRatio = 物理像素 / 獨立像素瀏覽器
css中的px是設備的獨立像素,分辨率約到,1px表明的物理像素越大,devicePixelRatio越大,因此在1080*1920這樣的設備上,默認狀況下div的寬度設計爲300ox(視devicePixelRatio的值而定)就鋪滿整個屏幕了.iphone
瀏覽器默認的viewport叫layout viewport,可經過document.documentElement.clientWidth來獲取,layout viewport寬度大於瀏覽器的可視區域寬度.ide
瀏覽器的可視區域叫visual viewport,可經過window.innerWith獲取測試
移動設備的理想viewport叫作ideal viewport,不一樣設備的ideal viewport不一樣,可在http://viewportsizes.com查看不一樣設備的寬度ui
四、meta的viewportidea
1)<meta name="viewport" content=「width=device-width">測試結果: spa
注意:在iphone和ipad中ideal viewport都是豎屏的寬度
2)<meta name="viewport" content=「initial-scale=1」>能夠達到1)中一樣的效果,由於這個放大是相對於ideal viewport寬度的,放大1倍,就是相對ideal viewport 100%縮放
Window phone的IE不管橫屏仍是豎屏都按照豎屏設爲ideal viewport
3)<meta name="viewport" content="width=400, initial-scale=1">
瀏覽器會取width和放大較大的值做爲viewport值,例如with=400,ideal viewport 爲480,取ideal viewport寬度
總結:把當前的viewport 設置爲ideal viewport既能夠是width=device-width也能夠是設置inital-scale=1,但這兩個均有小的不見兼容性,因此建議把二者都寫上,inital-scale=1解決了iphone、ipad的毛病,width=device-with則解決了IE的問題
五、縮放相對於ideal viewport 來縮放,縮放值越大,當前的viewport寬度越小,例如iphone中ideal viewport 的寬度是320px,設置initial-scale=2,此時viewport就變成160px了,
所以獲得公式:
visual viewport寬度 = ideal viewport寬度 / 當前縮放值
大部分瀏覽器符合這個理論,安卓自帶的webkit瀏覽器只有在 initial-scale = 1 以及沒有設置width屬性時纔是表現正常的,IE上根本無論inittial-scale,永遠表現出來的是1
六、initial-scale的默認值,顯然不是1,爲1的時候layaout viewport 寬度等於ideal viewport寬度
安卓上好像沒有默認值
iphone和ipad上的默認值很神奇,爲了讓頁面完美展示在設備上(不出現滾動條),是本身計算的,
當前縮放值= ideal vieport寬度/visual viewport 寬度,
例如320手機,當前縮放值 = 320 / 980,也就是0.33
七、動態改變meta viewport標籤
1)document.write
document.write(‘<meta name="viewport" content="width=device-width,initial-scale=1">')
2)setAttribute
<meta id="testViewport" name="viewport" content="width = 380"> <script> var mvp = document.getElementById('testViewport'); mvp.setAttribute('content','width=480'); </script>
有英文讀寫能力能夠參考:
https://www.quirksmode.org/mobile/viewports.html