viewport
viewport就是視口，它是頁面的顯示大小，區別于瀏覽器窗口的大小，它可能比瀏覽器窗口大。
1px
在css中我們一般使用px作為單位，但是css的1px和實際的物理像素點的1px是有區別的，iphone4以前分辨率是320*480，在蘋果推出retina屏之后，分辨率變成了640*960，由于屏幕大小沒變化，物理像素卻增加了一倍，導致這個時候一個css像素是等于兩個物理像素的。
window對象有一個devicePixelRatio屬性，俗稱dpr，它是設備物理像素和css像素的比例，所以640*960的時候，dpr為2。
iphone6設備寬高為375*667，dpr為2，所以物理像素就應該是750*1334.
視口寬度
不同的設備有不同的視口寬度，但是所有的iphone的理想視口寬度都是320px，無論它的屏幕寬度是320還是640，就是說iphone里面，320px就代表理想中iphone屏幕的寬度，這樣可以讓同一個網站在不同分辨率下的瀏覽效果差不多。安卓設備不同，很很多種視口寬度，但常見的基本也就是320，360，384等幾種。
通過設置<meta name="viewport" content="width=device-width">來讓視口獲得理想寬度。同樣，設置<meta name="viewport" content="initial-scale=1">也可以讓視口獲得理想寬度，因為這個縮放就是根據理想寬度來縮放的。當兩個都寫的時候取大的。
淘寶的解決方案
引入淘寶的flexible的文件，最好在html的頂部，這個js會自動幫我們在html標簽上生成data-dpr和font-size，然后根據dpr的大小，動態設置viewport的縮放。font-size為移動設備的物理像素 / 10，一般設置rem先寫死一個常量，比如設計稿是750，常量就是75，這是為，設置rem通過實際寬度 / 75，設置字體一般通過data-dpr數值進行縮放。圖片通過css的屬性選擇器[data-dpr]進行選擇大圖。
flexible的data-dpr處理方案是安卓統一dpr為1，蘋果根據屏幕大小來設置dpr。
網易解決方案
比如設計稿是640，定rem為100px，即1rem=100px，這個時候計算font-size = deviceWidth / 6.4，然后設置<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">
當物理寬度過大
var deviceWidth = document.documentElement.clientWidth;
if(deviceWidth > 640) deviceWidth = 640;
document.documentElement.style.fontSize = deviceWidth / 6.4 + 'px';
當deviceWidth大于640時，物理分辨率要大于1280(dpr:2)，這個時候應該去訪問pc網站了。可以給body設置一個6.4rem，margin：0 auto；居中顯示。
