標籤之viewport

大多數情況下 <meta name="viewport" width="device-width"> 這個標籤比媒體查詢要給力的多。viewport起源於apple，但現在被絕大多數移動瀏覽器所支持。這個標籤的寫法可以讓你的layout viewport完全適配設備寬度。

1，什麼是viewport，爲什麼需要viewport：

viewport：視口，視覺窗口，顯示區域。

在顯示面積上手機屏幕相對桌面顯示器要小很多，在幾年前(現在也如此)大部分網站都是爲桌面顯示器瀏覽而設計，很少考慮到適應手機屏幕，所以如果用手機瀏 覽大多網站時會出現問題，比如常見固定寬度的網頁會出現橫向豎向滑動條，當然這不算什麼大問題；但如果是瀏覽流動佈局的網頁那情況會非常糟糕，設想一個寬 度爲30%的側邊欄對於320px手機屏幕而言也就96px，只能容納8個12px的漢字，可閱讀性非常差。

"爲了讓手機也能獲得良好的網頁瀏覽體驗，Apple找到了一個辦法：在移動版(iOS)的Safari中定義了viewport meta標籤①，它的作用就是創建一個虛擬的窗口(viewport)，而且這個虛擬窗口的分辨率接近於桌面顯示器，Apple將其定位爲980px②。"

以一代iphone下的Safari來說就是：
在iphone的320px物理屏幕上——視覺窗口(visual viewport)，創建出了一個980px的虛擬窗口——佈局窗口(layout viewport)，在視覺窗口(visual viewport)中我們可以拖動橫向豎向滑動條或者放大縮小網頁，來達到最佳的瀏覽效果(類似桌面瀏覽器)；而佈局窗口(layout viewport)用來配合CSS渲染布局，例如當我們設置一個容器的寬度爲100%時，這個容器的實際值爲980px而不是320px。如此一來大部分 網頁就能以縮放的形式正常的顯示在手機屏幕上了。

因爲iphone的layout viewport默認爲980px，導致專爲其優化的320px寬的頁面只能以縮放的方式顯示，這時就需要對viewport進行設置：

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

這個是最常見的一條viewport meta代碼，將viewport定義爲：寬度爲設備寬度，初始縮放比例爲1倍，禁止用戶縮放。設置好後我們的頁面就顯示完美了。

layout viewport的默認值：
在Apple實現viewport後，其他瀏覽器也加入了對viewport meta的支持，但彼此間還是有些差異，差異最大的是layout viewport的表現：

Safari iPhone: 980px
Opera: 850px
Android WebKit: 800px
IE: 974px

最後關注下width=device-width：
其實這個屬性&值很有意思，字面意應該是viewport寬度等於設備寬度，但在實際中不同的瀏覽器都給出了個定值：320px；這個值還是源於 Apple，因爲早期iphone的分辨率爲320px × 480px，大量爲iphone量身定製的網站都設置了viewport:width=device-width，並且按照寬度320px來設計製作，所 以其他瀏覽器加入viewport支持時爲了兼容性也將device-width定義爲了320px。

註解
① 除此之外不同移動瀏覽器廠商也有不同的解決方案，例如UCweb就是使用中間件技術。
②不同的瀏覽器廠商對於layout viewport的大小定義不同，詳見”layout viewport的默認值”。

2，viewport總共有5個屬性，分別如下：

1 2 3 4 5 6 7

<meta name="viewport" content=" height = [ pixel_value |device-height] , width = [ pixel_value |device-width ] , initial-scale = float_value , minimum-scale = float_value , maximum-scale = float_value , user-scalable =[yes | no] , target- densitydpi = [ dpi_value | device-dpi| high-dpi | medium-dpi | low-dpi] " />

在這些屬性裏面，我們重點關注target-densitydpi，這個屬性可以改變設備的默認縮放。medium-dpi是target-densitydpi的默認值，如果我們顯式定義target-densitydpi=device-dpi，那麼設備就會按照真實的dpi來渲染頁面。打個比方說，一張320*480的圖片，放在iphone4裏面，默認是佔滿屏幕的，但如果定義了target-densitydpi=device-dpi，那麼圖片只佔屏幕的四分之一（二分之一的平方），因爲iphone4的分辨率是640*960。

3,解決方案

（1） 簡單粗暴

如果我們按照320px寬的設計稿去製作頁面，並且不做任何的設置，頁面會默認自動縮放到跟手機屏幕相等的寬度（這是由於 medium-dpi是target-densitydpi的默認值，和不同密度對應不同縮放比例所決定的，這一切都是移動設備自動完成的 ）。所以這種解決方案，簡單，粗暴，有效。但有一個致命的缺點，對於高密度和超高密度的手機設備，頁面（特別是圖片）會失真，而且密度越多，失真越厲害。

（2） 極致完美

在這種方案中，我們採用 target-densitydpi=device-dpi，這樣一來，手機設備就會按照真實的像素數目來渲染，用專業的話來說，就是1 CSS pixels = 1 device pixels。比如對於 640*960的 iphone，我們就可以做出 640*960的頁面，在iphone上顯示也不會有滾動條。當然，對於其他設備，也需製作不同尺寸的頁面，所以這種方案往往是使用媒體查詢來做成響應式的頁面。這種方案可以在特定的分辨率下完美呈現，但是隨着要兼容的不同分辨率越多，成本就越高，因爲需要爲每一種分辨率書寫單獨的代碼。下面舉個簡單的例子：

<meta name="viewport"content="target-densitydpi=device-dpi, width=device-width " />

（3） 合理折中

針對安卓設備絕大多數是高密度，部分是中密度的特點，我們可以採用一個折中的方案：我們對480px寬的設計稿進行還原，但是頁面制卻做成320px寬（使用background-size來對圖片進行縮小），然後，讓頁面自動按照比例縮放。這樣一來，低密度的手機有滾動條（這種手機基本上已經沒有人在用了），中密度的手機會浪費一點點流量，高密度的手機完美呈現，超高密度的手機輕微失真（超高密度的安卓手機很少）。這種方案的優點非常明顯：只需要一套設計稿，一套代碼（這裏只是討論安卓手機的情況）。

cf:

http://www.qianduan.net/mobile-webapp-develop-essential-knowledge.html

還可參考：http://www.w3cplus.com/css/A-pixel-is-not-a-pixel-is-not-a-pixel.html