移動端開發viewport深刻理解（轉）

1、viewport的概念

 

　　移動設備上的viewport就是設備的屏幕上能用來顯示咱們的網頁的那一塊區域， 就是瀏覽器上用來顯示網頁的那部分區域，但viewport不侷限於瀏覽器可視區域

的大小，它可能比瀏覽器的可視區域要大，也可能比瀏覽器的可視區域要小。

 

　　在默認狀況下，移動設備上的viewport都是要大於瀏覽器可視區域的，這是由於 考慮到移動設備的分辨率相對於桌面電腦來講都比較小，因此爲了能在移動設備上正常顯示那些傳統的爲桌面瀏覽器設計的網站，移動設備上的瀏覽器都會把本身默認的viewport設爲980px或1024px（該值由設備本身屏幕大小決定），但帶來的後果就是瀏覽器會出現橫向滾動條，由於瀏覽器但是區域的寬度是比這個默認的viewport的寬度要小的。

 

2、css中的1px並不等於設備的1px

 

　　在css中咱們通常使用px做爲單位，在桌面瀏覽器中css的1個像素每每都是對應着電腦屏幕的1個物理像素，這可能會形成咱們的一個錯覺，那就是css中的像素就是設備的物理像素。但實際狀況並不是如此，css中的像素只是一個抽象的單位，在不一樣的設備或不一樣的環境中，css中1px所表明的設備物理像素是不一樣的。在爲桌面瀏覽器設計的網頁中，咱們無需對這個斤斤計較，但在移動設備上，必須弄明白這點。

 

　　 在早先的移動設備中，屏幕像素密度都比較低，在iphone3上，一個css像素確實是等於一個屏幕物理像素的。後來隨着技術的發展，移動設備的屏幕像素愈來愈高，從iphone4開始，分辨率提升了，但屏幕尺寸沒變，這就意味着一樣大小的屏幕上，像素卻多了一倍，這時，一個css像素是等於兩個物理像素的。

 

　　還有一個因素也會引發css中px的變化，那就是用戶縮放，例如，當用戶把頁面放大一倍，那麼css中1px所表明的物理像素也會增長一倍；反之把頁面縮小一倍，css中1px所表明的物理像素也會減小一倍。

 

　　window對象中有一個devicePixelRatio屬性，官方定義爲：設備物理像素和設備獨立像素的比例。devicePixelRatio = 物理像素 / 設備獨立像素

 

3、關於viewport的三個理論

 

     由於分辨率增大，但屏幕尺寸沒有變大多少，必須讓css中的1px表明更多的物理像素，才能讓1px的東西在屏幕上的大小與那些低分辨率的設備差很少，否則就會由於過小而看不清。因此在1080x1920這樣的設備上，在默認狀況下，也許你只要把一個div的寬度設爲300多px，就是滿屏的寬度了。回到正題上來，若是把移動設備上瀏覽器的可視區域設爲viewport的話，某些網站就會由於viewport太窄而顯示錯亂，因此這些瀏覽器就決定默認狀況下把viewport設爲一個較寬的值，好比980px，這樣的話即便是那些爲桌面設計的網站也能在移動瀏覽器上正常顯示了。

 

　　PPK把這個瀏覽器默認的viewport叫作 layout viewport。這個寬度能夠經過document.documentElement.clientWidth來獲取。

 

     然而，layout viewport 的寬度是大於瀏覽器可視區域寬度的，因此咱們還須要一個viewport 來表明瀏覽器的可視區域的大小，PPK把這個viewport 叫作 visual viewport。這個viewport能夠經過window.innerWidth 來獲取。但在 Oprea mini 和 UC 8 中沒法正確獲取。

 

　　

 

 

     如今已經有兩個viewportl了：layout viewport 和 visual viewport。但瀏覽器以爲還不夠，由於如今愈來愈多的網站都會爲移動設備進行單獨的設計，因此必須還要有一個能完美適配移動設備的viewport。所謂的完美適配指的是，首先不須要用戶縮放和橫向滾動條就能正常的查看網站的全部內容；第二，顯示的文字的大小是否合適，好比一段14px大小的文字，不會由於在一個高密度像素的屏幕裏顯示得過小而沒法看清，理想的狀況是這段14px的文字不管是在何種密度屏幕，何種分辨率下，顯示出來的大小都是差很少的。固然，不僅是文字，其餘元素，像圖片什麼的也是這個道理。PPK把這個viewport叫作 ideal viewport，也就是第三個viewport——移動設備的理想viewport。

 

     ideal viewport並無一個固定的尺寸，不一樣的設備擁有不一樣的ideal viewport。全部的iphone的ideal viewport寬度都是320px，不管它的屏幕寬度是320仍是640，也就是說，在iphone中，css中的320px就表明iphone屏幕的寬度。

 

     可是安卓設備就比較複雜了，有320px，360px,384px等等。

 

 　　　　

4、利用meta標籤對viewport進行控制

 

     移動設備默認的viewport是 layout viewport，也就是那個比屏幕要寬的viewport，但在進行移動設備網站的開發時，咱們須要的是 ideal viewport。

那麼怎麼才能獲取  ideal viewport 呢？ 這時候輪到meta標籤出場了。

 

　　咱們在開發移動設備網站時，最多見的一個動做就是把下面這個東西複製到咱們的head標籤中：

 

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

 

該meta標籤的做用是讓當前viewport的寬度等於設備的寬度，同時不容許用戶手動縮放。也許容許用戶縮放不一樣的網站有不一樣的要求，但讓viewport的寬度等於設備的寬度，這個應該是你們都想要的效果，若是你不這樣設定的話，那就會使用那個比屏幕寬的默認viewport，也就是說會出現橫向滾動條。

 

這個name 爲 viewport 的 meta的標籤到底有哪些東西呢？又都有什麼做用呢？

 

meta viewport標籤首先是蘋果公司在其safari瀏覽器中引入的，目的就是解決移動設備的viewport問題。

 

在蘋果的規範中，meta viewport有6個屬性

width	設置layout viewport的寬度爲一個正整數，或字符串"width-device"
intial-scale	設置頁面的初始縮放值，爲一個數字，能夠帶小數
minimum-scale	容許用戶的最小縮放值，爲一個數字，能夠帶小數
maximum-scale	容許用戶的最大縮放值，爲一個數字，能夠帶小數
height	設置Layou viewport 的高度，這個屬性對咱們並不重要，不多使用
user-scalable	是否容許用戶進行縮放，值爲"no"或"yes"，"no"表明不容許，"yes"表明容許

 

　　多個屬性同時使用逗號隔開就行。

 

　　此外，安卓還支持 target-densitydpi 這個私有屬性，它表示目標設備的等級密度，做用是決定css中的1px表明多少物理像素

 

target-densitydpi

值可爲：（某個值）| high-dpi | medium-dpi | low-dpi | device-dpi

 

　　特別說明的是，當target-densitydpi=device-dpi時，css中的1px等於物理像素的1px。

　　由於這個屬性只有安卓支持，而且安卓已經決定要廢棄這個屬性，因此這個屬性咱們要避免使用。

 

5、把當前的viewport寬度設置爲 ideal viewport的寬度

 

     要獲取ideal viewport就必須把默認的layout viewport的寬度設爲移動設備的屏幕寬度。由於meta viewport中的width能控制layout viewport的寬度，因此咱們只須要把width設爲width-device這個特殊的值就好了。

 

<meta name="viewport" content="width=device-wdith">

<meta name="viewport" content="width=device-width">

 

能夠看到經過width=device-width，全部瀏覽器都能把當前的viewport寬度變成ideal viewport的寬度，但要注意的是，在iphone和ipad上，不管是豎屏仍是橫屏，寬度都是豎屏時ideal viewport的寬度。

 

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

 

也能達到和上一句代碼同樣的效果，即也能把當前viewport變爲 ideal viewport、

 

 

總結：在移動端開發的時候，我們不只要會使用meta viewport標籤來使頁面更好的顯示在移動設備上，咱們也要知道一些理論知識，不能拿來就用，理論與應用結合，相信能走的更遠。

 

（圖文轉載自 http://www.cnblogs.com/2050/p/3877280.html 做者： 無雙）