什麼是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。