viewport的概念
viewport就是設備的屏幕上能用來顯示我們的網頁的那一塊區域。
content屬性值
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
- viewport標記，用於指定用戶是否可以縮放Web頁面，並對相關的選項進行設定。
- width 和height 指令分別指定視區的邏輯寬度和高度。它們的值可以是以像素為單位的數字，也可以是一個特殊的標記符號。如上文代碼中device-width即表示，視區寬度應為設備的屏幕寬度。類似的，device-height即表示設備的屏幕高度。
- initial-scale用於設置Web頁面的初始縮放比例。默認的初始縮放比例值因智能手機瀏覽器的不同而有所差異，通常情況下，設備會在瀏覽器中呈現出整個Web頁面。設為1.0則顯示未經縮放的Web頁面。
- maximum-scale和minimum-scale用於設置用戶對於Web頁面縮放比例的限制。值的范圍為0.25~10.0之間
- user-scalable指定用戶是否可以縮放視區，即縮放Web頁面的視圖。值為yes時允許用戶進行縮放，值為no時不允許縮放。
整個網頁在設備內顯示時的頁面寬度就會等於設備邏輯像素大小，也就是device-width。這個device-width的計算公式為：設備的物理分辨率/(devicePixelRatio * scale)，在scale為1的情況下，device-width = 設備的物理分辨率/devicePixelRatio。
devicePixelRatio稱為設備像素比，每款設備的devicePixelRatio都是已知，並且不變的，目前高清屏，普遍都是2，不過還有更高的，比如2.5, 3 等。淘寶觸屏版布局的前提就是viewport的scale根據devicePixelRatio動態設置：
css中的1px並不等於設備的1px
在css中我們一般使用px作為單位，在pc瀏覽器中css的1個像素往往都是對應着電腦屏幕的1個物理像素，這可能會造成我們的一個錯覺，那就是css中的像素就是設備的物理像素。但實際情況卻並非如此，css中的像素只是一個抽象的單位，在不同的設備或不同的環境中，css中的1px所代表的設備物理像素是不同的。
在為pc瀏覽器設計的網頁中，我們無需對這個津津計較，但在移動設備上，必須弄明白這點。在早先的移動設備中，屏幕像素密度都比較低，如iphone3，它的分辨率為320x480，在iphone3上，一個css像素確實是等於一個屏幕物理像素的。后來隨着技術的發展，移動設備的屏幕像素密度越來越高，從iphone4開始，蘋果公司便推出了所謂的Retina屏，分辨率提高了一倍，變成640x960，但屏幕尺寸卻沒變化，這就意味着同樣大小的屏幕上，像素卻多了一倍，這時，一個css像素是等於兩個物理像素的。后來，不同設備上的一個css像素相當於多少個屏幕物理像素，也因設備的不同而不同，沒有一個定論。
還有一個因素也會引起css中px的變化，那就是用戶縮放。例如，當用戶把頁面放大一倍，那么css中1px所代表的物理像素也會增加一倍；反之把頁面縮小一倍，css中1px所代表的物理像素也會減少一倍。關於這點，在文章后面的部分還會講到。
在移動端瀏覽器中以及某些桌面瀏覽器中，**window對象有一個devicePixelRatio屬性（設備像素比），它的官方的定義為：設備分辨率和設備獨立像素的比例，也就是 devicePixelRatio = 設備的物理像素（分辨率） / 獨立像素（實際css中像素）。獨立像素也就是設備的寬度（device-width），device-width = 設備分辨率/devicePixelRatio(設備像素比) **。例如，在Retina屏的iphone上，devicePixelRatio的值為2，也就是說1個css像素相當於2個物理像素。
參考：https://blog.csdn.net/u010517901/article/details/43156093