在絕大多數移動端的web頁面中，head標籤裏面都會有這樣一行代碼
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=0" />然而PC端的頁面中卻不怎麼出現。那麼這個viewport的作用是什麼呢？
viewport根據字面翻譯，爲視窗，窗口。viewport的寬度決定了html這個標籤的寬度。viewport又分爲visual viewport(可視窗口）和layout viewport（佈局窗口）。
可以想象如下一種場景，你做在電影院的某一排看電影，熒幕的大小肯定是固定的，此時熒幕的大小就相當於layout viewport。你的眼睛的視野範圍就可以理解爲visual viewport，這個範圍取決於你離屏幕的距離，離熒幕越近，你看到的屏幕範圍就越小，就看不全，離的越遠，你看到的屏幕就更加全。
在PC端時，由於屏幕尺寸一般都比較大，所以瀏覽器默認viewport爲clientWidth，也即是visual viewport=layout viewport=clientWidth。所以當你的html寬度小於clientWidth時，你能看到全部的內容，就如同屏幕剛好佔滿你的視野。
但是在移動端，比如手機，屏幕的尺寸一般很小，如果默認使得兩個viewport值相等的話，那麼幾乎所有的pc頁面都會亂的不成樣子。所以手機瀏覽器中，visual viewport默認爲手機屏幕的大小，而layout viewport默認爲800px到1000px不等，不同瀏覽器的初始值不一樣。當你用手機打開一個pc端的網頁時，按照上面的規則，你只能看到其中的一部分，剩下的部分需要滾動屏幕才能看到。但是許多設備的瀏覽器爲了讓用戶能看全頁面，而選擇了最小縮放，也就相當於你離熒屏更遠以保證你能看到全部的屏幕。但是在電影院中，畢竟最遠距離是有限的，所以這個縮放也是有範圍的。當達到最小縮放的時候，如果元素的寬度（px）依然很寬（熒屏是在太大了，最後一排也看不全），那麼就會出現橫向滾動條（你只能搖腦袋了）。
width爲100%的時候：
width爲2000px的時候：
在移動端開發中，一般是不允許出現橫向滾動條的，與app相同，而且得保證諸如按鈕這樣的元素能顯示出合適的大小來讓用戶去觸摸。所以得避免layout viewport太寬以及避免瀏覽器的縮放。這個時候我們就得用到文章開頭的那句代碼。
width=device-width表示我們將layout viewport的寬度設爲跟設備一樣寬，以IPHONE6爲例，IPHONE6的橫向分辨率爲750，轉換之後所代表的css寬度爲375px，這個時候layout viewport的寬度就爲375px，也即是html的寬度爲375px。一般設計稿也是以375或者750來出圖，這樣就可以很方便的在設備上實現頁面了。
假設在設計稿中有一個寬200px，高70px的按鈕，效果如下：
如果不設置viewport，則是這個樣子的：
initial-scale=1, maximum-scale=1是將最大和最小縮放都設置爲1，也即是不縮放，並且使用user-scalable=0禁用了用戶通過雙指縮放。
原文出處：http://www.foreverpx.cn
轉載請註明出處。