移動WEB viewport 相關知識

瞭解移動web viewport的知識，主要是爲了切圖時心中有數。本文主要圍繞一個問題：切圖時怎樣設置<meta name="viewport">相關參數？圍繞這個問題對viewport展開講解。

1、viewport【此處的viewport即layout viewport】概念

移動設備的viewport是指設備屏幕上可以顯示網頁的一塊區域。

這塊顯示網頁的區域可能比瀏覽器可視區域大，也可能比瀏覽器可視區域小，切圖時也能夠設置。默認狀況，移動設備的viewport大於移動設備瀏覽器的可視區域，主要是爲了在移動設備上可以顯示PC端的頁面。

移動設備瀏覽器會有一個默認的viewport值多是980px，1024px或其餘值，由設備定。

手機瀏覽器要顯示pc頁面默認作了兩件事，先把頁面渲染在980px的layout viewport中，而後經過縮放在手機屏幕上展現，讓用戶看到頁面全貌。

可是移動端切圖的時候咱們不會用這個默認的980px來佈局，主要是由於
* 寬度不可控制，不一樣系統不一樣設備的默認值viewport均可能不一樣
* 頁面縮小版顯式，交互不友好
* 連接不可點
* 有縮放，縮放後又有滾動，交互不友好。

並且用戶縮放會引發px和dp對應關係發生變化，頁面放大一倍，那麼css中1px所表明的物理像素會增長一倍，頁面縮小一倍，css中1px所表明的物理像素會減小一倍。

因此用默認的980px佈局是很不規範的，那麼切圖時爲了排版正確，咱們怎麼作呢？咱們會用到<meta>標籤，下面一步步說。

2、layout viewport和visual viewport

一、layout viewport

瀏覽器默認的viewport叫layout viewport，這個layour viewport能夠經過document.documentElement.clientWidth 來獲取。（對前端切圖來講很重要）

二、visual viewport

layout viewport的寬度大於瀏覽器可視區域的寬度，還須要一個viewport表明瀏覽器可視區域的大小（對前端切圖來講不是過重要），這個viewport叫 visual viewport。

visual viewport的寬度能夠經過window.innerWidth 來獲取。

三、ideal viewport

visual viewport表明移動設備瀏覽器可視區域的寬度，layout view爲了顯示PC端頁面被設置的很大，如今移動端發展這麼快速，還須要一個能完美適配移動設備的viewport。這個完美適配的viewport中用戶不須要縮放，不須要橫向滾動條就能正常查看網站的全部內容。這個ideal viewport就是移動設備理想viewport。

ideal viewport的寬度等於移動設備的屏幕寬度。

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

移動端默認的viewport是layout viewport，也就是那個比屏幕寬的viewport，而切圖時須要讓這個默認的layout viewport變成ideal viewport。這就是移動端開發中<meta> 標籤的做用。

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

這段meta重置layout viewport的寬度爲設備寬度，讓咱們切圖時在ideal viewport中完成，而不是用默認的layout viewport來切圖。

meta viewport 標籤首先是由蘋果公司在其safari瀏覽器中引入的，目的就是解決移動設備的viewport問題。後來安卓以及各大瀏覽器廠商也都紛紛效仿，引入對meta viewport的支持，事實也證實這個東西仍是很是有用的。

在蘋果的規範中，meta viewport 有6個屬性(暫且把content中的那些東西稱爲一個個屬性和值)，以下：

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

 

 

本文做者starof,因知識自己在變化，做者也在不斷學習成長，文章內容也不定時更新，爲避免誤導讀者，方便追根溯源，請諸位轉載註明出處：http://www.cnblogs.com/starof/p/5443445.html有問題歡迎與我討論，共同進步。 

擴展閱讀：

ppk大神對於移動設備上的viewport的研究（第一篇，第二篇，第三篇）。