移動前端開發的viewport總結整理

標籤：

1.通俗講行動裝置上的viewport就是裝置的螢幕上能用來顯示我們的網頁的那塊地區，但不是瀏覽器可視地區。一般來講，行動裝置上的viewport都要大於瀏覽器的可視地區。行動裝置上的瀏覽器會把預設的viewport設定為980px或1024px，這樣會造成瀏覽器出現橫向捲軸。

2.css中的1px不等於裝置的1px。解析度越大，css中1px代表的物理像素就會越多。

3.三個viewpor理論：layout viewport ；visual viewpoint，ideal viewp。

　layout viewport:如果把行動裝置上瀏覽器的可視地區設為viewport的話，某些網站就會因為viewport太窄而顯示錯亂，所以這些瀏覽器就決定預設情況下把viewport設為一個較寬的值，比如980px，這樣的話即使是那些為案頭設計的網站也能在行動瀏覽器上正常顯示了。ppk把這個瀏覽器預設的viewport叫做 layout viewport。這個layout viewport的寬度可以通過document.documentElement.clientWidth 來擷取。

　visual viewport：瀏覽器的可視地區的大小，可以銅通過window.innerWidth來擷取。

　ideal viewport:完美適配行動裝置的viewport，它的寬度等於行動裝置的螢幕寬度。jquery mobile 架構做出來就是為了使介面適配各種行動裝置，在任何行動裝置上都不會出現橫向捲軸。

4.利用meta標籤對viewpoint進行控制。

　行動裝置預設的是layout viewport ，它要比螢幕更寬。想要達到ideal viewport效果

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

在iphone和ipad上，無論是豎屏還是橫屏，寬度都是豎屏時ideal viewport的寬度。
同樣：<meta name="viewport" content="initial-scale=1"> 也能實現把當前的viewport變為ideal viewport。但這次windows phone 上的IE 無論是豎屏還是橫屏都把寬度設為豎屏時ideal viewport的寬度。

所以完美解決辦法是：相容ie及iphone。

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

5.在iphone和ipad上，無論你給viewport設的寬的是多少，如果沒有指定預設的縮放值，則iphone和ipad會自動計算這個縮放值，以達到當前頁面不會出現橫向捲軸(或者說viewport的寬度就是螢幕的寬度)的目的。

 

原文出處：http://www.cnblogs.com/2050/p/3877280.html。

 

移動前端開發的viewport總結整理