移動端適配方案(上)

要搞懂移動端的適配問題，就要先搞明白像素和視口。

像素

在移動端給一個元素設置 width:200px 時發生了什麼？這裏的px究竟是多長呢？像素是網頁佈局的基礎，可是咱們一直在用直覺使用它。

其實存在兩種像素：

1. 設備像素

屏幕的物理像素，任何設備屏幕的物理像素的數量都是固定不變的。

2. CSS像素

在CSS、JS中使用的一個抽象的概念，單位是 px。

順便說下，CSS像素也能夠稱爲設備獨立像素(device-independent pixels)，簡稱爲dips，單位是dp。

那麼，咱們如今再來講說一個元素 width:200px 之後會怎麼樣。這個元素跨越了200個CSS元素，200個CSS元素至關於多少個設備像素取決於兩個條件：

• 頁面是否縮放

• 屏幕是否爲高密度

這兩方面後面再解釋，先梳理一下手機硬件之間的關係，注意這裏使用的都是物理像素。

以 iPhone5 爲例，咱們已知的是：

1. 分辨率：1136pt x 640pt
   指屏幕上垂直有 1136 個物理像素，水平有 640 個物理像素

2. 屏幕尺寸： 4英寸
   注意英寸是長度單位，不是面積單位。4英寸指的是屏幕對角線的長度。

3. 屏幕像素密度：326dpi
   屏幕像素密度（Pibel Per Inch）簡稱 ppi ，單位是 dpi（dot per inch）。這裏指屏幕水平或垂直每英寸有326個物理像素。原則上來講，ppi越高越好，由於圖像會更加細膩清晰。

ppi 是能夠經過 分辨率 和 屏幕尺寸 計算獲得的：

這個網站列出了不少設備的分辨率和屏幕尺寸，而且計算了ppi。

視口

桌面瀏覽器中，瀏覽器窗口就是約束你的CSS佈局視口（又稱初始包含塊）。它使全部CSS百分比寬度推算的根源，它的做用是CSS佈局限制了一個最大寬度，視口的寬度和瀏覽器窗口寬度一致。

可是在移動端，狀況就很複雜了。

佈局視口

一個沒有爲移動端作優化的網頁，會盡量縮小網頁讓用戶看到全部東西。這是個人手機查看博客園的樣子，你也能夠在Chrome中以移動開發模式看到。

瀏覽器廠商爲了讓用戶在小屏幕下網頁也可以顯示地很好，因此把視口寬度設置地很大，通常在 768px ~ 1024px 之間，最多見的寬度是 980px。

因此，在手機上，視口與移動端瀏覽器屏幕寬度再也不相關聯，是徹底獨立的，這個瀏覽器廠商定的視口被稱爲佈局視口。

佈局視口咱們是看不見的，只知道網頁的最大寬度是 980px ，而且被縮放在了屏幕內。

能夠這樣設置佈局視口的寬度：

<meta name="viewport" content="width=640">

---

媒體查詢與佈局視口

700px 指的是佈局視口的寬度

@media (min-width: 700px){
    ...
}

---

document.documentElement.clientWidth/Height返回佈局視口的尺寸

視覺視口

視覺視口是用戶正在看到的網頁的區域，大小是屏幕中CSS像素的數量。

---

window.innerWidth/Height返回視覺視口的尺寸

理想視口

佈局視口明顯對用戶是不友好的，徹底忽略了手機自己的尺寸。因此蘋果引入了理想視口的概念，它是對設備來講最理想的佈局視口尺寸。理想視口中的網頁用戶最理想的寬度，用戶進入頁面的時候不須要縮放。

如今討論所謂的『最理想的寬度』究竟是多少？其實，若是咱們把佈局視口的寬度改爲屏幕的寬度不就不用縮放了麼。能夠這樣設置告訴瀏覽器使用它的理想視口：

<meta name="viewport" content="width=device-width">

定義理想視口是瀏覽器的事情，並不能簡單地認爲是開發者定義的，開發者只能使用。

---

screen.width/height返回理想視口的尺寸，有嚴重的兼容性問題---可能返回兩種值：

1. 理想視口的尺寸（下載瀏覽器）

2. 屏幕的設備像素尺寸（內置瀏覽器）

Screen size tests和Understanding viewport能夠測試你的設備的screen.width值，同一設備的不一樣瀏覽器返回的值多是不同的。這一狀況主要發生在默認瀏覽器和下載瀏覽器（如UC、Chrome）之間。

默認瀏覽器是安卓系統內置的瀏覽器，長下面那個樣子。並且它使用的是Webkit而不是Blink。只有在更新安卓系統的時候才能更新它。直到安卓4.3，Google再也不更新。

而下載瀏覽器都返回的是理想視口尺寸。

縮放

縮放與設備像素、CSS像素的關係

縮放是在放大或縮小CSS像素，好比一個寬度爲 200px 的元素不管放大，仍是200個CSS像素。可是由於這些像素被放大了，因此CSS像素也就跨越了更多的設備像素。縮小則相反。

縮放與視口

縮放會影響視覺視口的尺寸

頁面被用戶放大，視覺視口內CSS像素數量減小；被用戶縮小，視覺視口內CSS像素數量增多就好了。這個道理應該是不難想的。

用戶縮放不會影響佈局視口

注意，這是『用戶縮放』，後面會說開發者設置縮放的狀況

縮放比例

咱們在開發者工具中能夠在這裏查看縮放比例：

這裏的 0.3 是相對於理想視口的。

在下載瀏覽器中，能夠這麼算（理想視口與視覺視口的比）：

zoom level = screen.width / window.innerWidth

禁止縮放

<meta name="viewport" content="user-scalable=no">

設置縮放

<meta name="viewport" content="initial-scale=2">

使用initial-scale有一個反作用：同時也會將佈局視口的尺寸設置爲縮放後的尺寸。因此initial-scale=1與width=device-width的效果是同樣的。

完美視口

解決各類瀏覽器兼容問題的理想視口設置

<meta name="viewport" content="width=device-width,initial-scale=1">

設備像素比

在談到像素的時候，講到除了縮放，屏幕是否爲高密度也會影響設備像素和CSS像素的關係。

在縮放程度爲100%（這個條件很重要，在後面會說到）時，他們的比例叫作設備像素比(device pixel ratio)：

dpr = 設備像素 / CSS像素

能夠經過JS獲得： window.devicePixelRatio

設備像素比也和視口有關：

dpr = 屏幕橫向設備像素 / 理想視口的寬

總結

這一篇介紹了移動端適配須要掌握的知識，先說明了移動端存在的兩種像素，而後介紹了三種視口，由縮放對視口的影響引入理想視口，最後說明設備想告訴比。下一篇介紹如今市面上的適配方案。

移動端適配方案(下)

參考文章

• ppk的移動端系列文章

• screen.width is useless

• devicePixelRatio

• More about devicePixelRatio

• screen sizes 收集了不少手機的信息

下面這些文章可能也會對你有幫助：

• 移動前端開發之viewport的深刻理解

• 深刻了解viewport和px

個人博客，歡迎訂閱

微博粉絲太少，求粉