移動端自適應meta viewport設置

 

一、viewport

 

移動設備上的viewport是設備屏幕上用來顯示網頁的那部分區域，再具體一點就是瀏覽器上用來顯示網頁的那部分區域，但viewport又不侷限於瀏覽器可視區域的大小，它可能比瀏覽器的可視區域大，也可能比瀏覽器的可視區域小。在默認狀況下，移動設備上的viewport都是大於瀏覽器可視區域的，這是由於移動設備的分辨率相對於PC來講都比較小，因此爲了能在移動設備上正常顯示那些爲PC瀏覽器設計的網站，移動設備上的瀏覽器都會把本身默認的viewport設爲980px或1024px（也多是其它值，由設備自己決定），但後果是瀏覽器出現橫向滾動條，由於瀏覽器可視區域的寬度比默認的viewport的寬度小。

3個viewport

 

 

（1）layout viewport

 

若是把移動設備上瀏覽器的可視區域設爲viewport的話，某些網站會由於viewport太窄而顯示錯亂，因此這些瀏覽器就默認會把viewport設爲一個較寬的值，好比980px，使得即便是那些爲PC瀏覽器設計的網站也能在移動設備瀏覽器上正常顯示。這個瀏覽器默認的viewport叫作 layout viewport。layout viewport的寬度能夠經過 document.documentElement.clientWidth來獲取。

 

（2）visual viewport

 

layout viewport的寬度是大於瀏覽器可視區域的寬度的，因此還須要一個viewport來表明瀏覽器可視區域的大小，這個viewport叫作 visual viewport。visual viewport的寬度能夠經過 document.documentElement.innerWidth來獲取。

 

（3）ideal viewport

 

ideal viewport是一個能完美適配移動設備的viewport。首先，不須要縮放和橫向滾動條就能正常查看網站的全部內容；其次，顯示的文字、圖片大小合適，如14px的文字不會由於在一個高密度像素的屏幕裏顯示得過小而沒法看清，不管是在何種密度屏幕，何種分辨率下，顯示出來的大小都差很少。這個viewport叫作 ideal viewport。

 

 

該meta標籤的做用是讓當前viewport的寬度等於設備的寬度，同時不容許用戶手動縮放。固然maximum-scale=1.0, user-scalable=0不是必需的，是否容許用戶手動播放根據網站的需求來定，但把width設爲width-device基本是必須的，這樣能保證不會出現橫向滾動條。

eta viewport 的6個屬性：

 

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