什么是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。如此一來大部分 網頁就能以縮放的形式正常的顯示在手機屏幕上了。
如何設置viewport
有了layout viewport似乎解決手機瀏覽網頁的難題，但如果遇到專門為手機優化的網頁就又有新的問題：是的，因為iphone的layout viewport默認為980px，導致專為其優化的320px寬的頁面只能以縮放的方式顯示，這時就需要對viewport進行設置：
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, user-scalable=no”/>
這個是最常見的一條viewport meta代碼，將viewport定義為：寬度為設備寬度，初始縮放比例為1倍，禁止用戶縮放。設置好后我們的頁面就顯示完美了：viewport全部屬性和值如下：
width: viewport寬度
height: viewport高度
initial-scale: 初始縮放比例
maximum-scale: 最大縮放比例
minimum-scale: 最小縮放比例
user-scalable: 是否允許用戶縮放例：width=960 或 device-width
height=1000 或 device-height
initial-scale=0.5
maximum-scale=2
minimum-scale=1
user-scalable=1 或 0 (yes 或 no)
layout viewport的默認值在Apple實現viewport后，其他瀏覽器也加入了對viewport meta的支持，但彼此間還是有些差異，差異最大的是layout viewport的表現：
Safari iPhone: 980px
Opera: 850px
Android WebKit: 800px
IE: 974px
最后關注下width=device-width其實這個屬性值很有意思，字面意應該是viewport寬度等於設備寬度（這里的設備寬度指的並不是物理像素而是設備獨立像素，其中設備物理像素和設備獨立像素比稱為devicePixelRatio），瀏覽器給出了個定值：320px；這個值還是源於 Apple，因為早期iphone的分辨率為320px × 480px，大量為iphone量身定制的網站都設置了viewport:width=device-width，並且按照寬度320px來設計制作，所 以其他瀏覽器加入viewport支持時為了兼容性也將device-width定義為了320px。