viewport

viewport就是視口，它是頁面的顯示大小，區(qū)別于瀏覽器窗口的大小，它可能比瀏覽器窗口大。

1px

在css中我們一般使用px作為單位，但是css的1px和實(shí)際的物理像素點(diǎn)的1px是有區(qū)別的，iphone4以前分辨率是320*480，在蘋果推出retina屏之后，分辨率變成了640*960，由于屏幕大小沒變化，物理像素卻增加了一倍，導(dǎo)致這個時候一個css像素是等于兩個物理像素的。

window對象有一個devicePixelRatio屬性，俗稱dpr，它是設(shè)備物理像素和css像素的比例，所以640*960的時候，dpr為2。

iphone6設(shè)備寬高為375*667，dpr為2，所以物理像素就應(yīng)該是750*1334.

視口寬度

不同的設(shè)備有不同的視口寬度，但是所有的iphone的理想視口寬度都是320px，無論它的屏幕寬度是320還是640，就是說iphone里面，320px就代表理想中iphone屏幕的寬度，這樣可以讓同一個網(wǎng)站在不同分辨率下的瀏覽效果差不多。安卓設(shè)備不同，很很多種視口寬度，但常見的基本也就是320，360，384等幾種。

通過設(shè)置<meta name="viewport" content="width=device-width">來讓視口獲得理想寬度。同樣，設(shè)置<meta name="viewport" content="initial-scale=1">也可以讓視口獲得理想寬度，因?yàn)檫@個縮放就是根據(jù)理想寬度來縮放的。當(dāng)兩個都寫的時候取大的。

淘寶的解決方案

引入淘寶的flexible的文件，最好在html的頂部，這個js會自動幫我們在html標(biāo)簽上生成data-dpr和font-size，然后根據(jù)dpr的大小，動態(tài)設(shè)置viewport的縮放。font-size為移動設(shè)備的物理像素 / 10，一般設(shè)置rem先寫死一個常量，比如設(shè)計(jì)稿是750，常量就是75，這是為，設(shè)置rem通過實(shí)際寬度 / 75，設(shè)置字體一般通過data-dpr數(shù)值進(jìn)行縮放。圖片通過css的屬性選擇器[data-dpr]進(jìn)行選擇大圖。

flexible的data-dpr處理方案是安卓統(tǒng)一dpr為1，蘋果根據(jù)屏幕大小來設(shè)置dpr。

網(wǎng)易解決方案

比如設(shè)計(jì)稿是640，定rem為100px，即1rem=100px，這個時候計(jì)算font-size = deviceWidth / 6.4，然后設(shè)置<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">

當(dāng)物理寬度過大

var deviceWidth = document.documentElement.clientWidth;
if(deviceWidth > 640) deviceWidth = 640;
document.documentElement.style.fontSize = deviceWidth / 6.4 + 'px';

當(dāng)deviceWidth大于640時，物理分辨率要大于1280(dpr:2)，這個時候應(yīng)該去訪問pc網(wǎng)站了。可以給body設(shè)置一個6.4rem，margin：0 auto；居中顯示。