牆裂科普：移動端適配的基礎概念

近幾年移動端設備數量增加迅速，致使各類設備屏幕尺寸不一，分辨率也是不盡相同。 做爲一個前端開發者，就不得不面對移動端頁面適配的問題，而適配的終極目標，就是讓頁面能在不一樣尺寸，不一樣分辨率的移動設備上，儘量的實現合理（我對「合理」的認識是：在保證良好的用戶瀏覽體驗的前提下，儘量的保留頁面的完整性）展現。

常見的移動端適配方案主要有下面幾種：

• 固定高度，寬度自適應
• 固定寬度，viewport 縮放
• 寬度 rem，viewport 縮放
• vw 方案

不論適配的方案如何多變，但都繞不開幾個基礎概念，只有搞清楚了基礎概念，才能正確的理解適配方案的工做原理，更好的幫助咱們解決實際開發中的問題。

像素

在編寫桌面端 CSS 代碼時咱們常常會使用 px 單位，好比說 width: 200px;，設置一個元素爲 200 像素寬，若是該 CSS 代碼應用到移動端設備，它會產生不同的效果(看起來元素變小了)，這是由於存在兩種像素。

設備像素(device pixel，dp)

設備像素(又稱物理像素)，即屏幕的物理像素，隨着設備生產出來就固定不變了，單位是 pt。好比說 iPhone X 的分辨率是 2436pt × 1125pt，表示屏幕由 2436 行，1125 列像素點組成。

CSS 像素(css pixel，px)

CSS 像素(又稱虛擬像素、設備獨立像素、邏輯像素) 是 web 編程的概念，指的是 CSS 樣式代碼中使用的邏輯像素。px 是一個相對的單位(相對於設備像素)，是圖像顯示的基本單元，它既不是一個肯定的物理量，也不是一個點或者小方塊，而是一個抽象概念。

做爲一個抽象概念，CSS 像素又具備兩個方面的相對性，即：

• 在同一個設備上，一個 CSS 像素所表明的設備像素是能夠變化的(縮放影響)；
• 在不一樣的設備之間，一個 CSS 像素所表明的設備像素是能夠變化的(高密度影響)；

像素密度(Pixels Per Inch，PPI)

像素密度，準確的說是每平方英寸(1 英寸等於 2.54 釐米)的面積上排列的像素點數量。像素密度越高，表明屏幕顯示效果越精細。

PPI 有對應的計算公式：

經過下圖更直觀的瞭解計算過程：

設備像素比(Device Pixels Ratio，DPR)

設備像素比指在 未縮放 狀況下，設備像素 與 CSS 像素的初始比例關係。簡單理解就是在移動開發中 1 個 CSS 像素佔用多少設備像素：

DPR 的計算方式以下：

簡單理解，DPR 與 PPI 呈正相關的關係，PPI 越大，則像素點排列越緊密，DPR 也就越大。

PS：JavaScript 中能夠經過 window.devicePixelRatio 代碼獲得 DPR 的值。

分辨率

分辨率指的是整塊屏幕的尺寸，與像素密度(PPI)是不一樣的概念，不要混淆。

脫離屏幕尺寸單說單個設備像素大小沒有實際意義，由於你能夠將 1920 * 1080 顆像素放到一臺 40 寸的小米電視機裏面，也能夠將一樣多的像素所有塞到一臺 5.5 寸的 iPhone7 Plus 手機裏面去，那麼對於 40 寸的電視而言，每一個像素顆粒固然會大於 5.5 寸的手機的像素。

因此對於設計師而言屏幕的分辨率沒有太多的實際意義，仍是得經過分辨率計算實際的像素密度(PPI)。

視口

在桌面瀏覽器中，視口是一個簡單的概念：視口就是瀏覽器的可視區域，也指瀏覽器的寬度。

可是在移動端，狀況就變得複雜了，爲了提供更好的網頁瀏覽感覺，視口被分紅了 佈局視口(layout viewport)、視覺視口(visual viewport)、理想視口(ideal viewport)。

佈局視口

一個沒有對移動端作適配的網頁在手機瀏覽器中瀏覽，手機瀏覽器會盡量的縮小網頁讓用戶看到所有的內容，好比下圖中的新浪新聞：

這是由於瀏覽器廠商把視口寬度設置得很大，通常在 768px ~ 1024px 之間(通常是 980px，具體是由設備本身決定)。因此在手機上，視口寬度與手機瀏覽器寬度（屏幕寬度）再也不有關聯，而瀏覽器廠商定的視口被稱爲 佈局視口。

注意：佈局視口咱們是看不見的，而且被縮放在屏幕內。好比說若是你建立一個 320px 寬的元素，那麼它在視口寬度設置爲 980px 的手機瀏覽器中，只能佔據屏幕實際大小的 1/3 左右，效果以下圖所示：

下圖列出了一些設備上瀏覽器的默認視口寬度：

咱們能夠經過 meta 視口標籤設置佈局視口的寬度：

<meta name="viewport" content="width=640">
複製代碼

PS：JavaScript 中能夠經過document.documentElement.clientWidth/height 代碼得到佈局視口的尺寸。

補充一點，CSS 裏面的 Media Queries(媒體查詢)指定的寬度就是佈局視口的寬度：

@media (min-width: 700px) {} /* 700px 指的就是佈局視口的寬度 */
複製代碼

視覺視口

視覺視口是用戶正在看到的網頁區域，它和設備的屏幕同樣寬，而且它的 CSS 像素的數量會隨着用戶縮放而改變，也就是說縮放會影響視覺視口的大小。當縮放比爲 100% 時，視覺視口與設備屏幕同樣寬。放大會使得視覺視口變得更小，由於屏幕上顯示的 CSS 像素更小了，而縮小會讓視覺視口更大，由於屏幕上的 CSS 像素更多了。

注意一點，當用戶縮放時，只有視覺視口的尺寸會發生改變，佈局視口不會改變。移動端的縮放不會致使 CSS 佈局被從新計算(多是出於性能的考慮)。

PS：JavaScript 中能夠經過 window.innerWidth/Height 代碼得到視覺視口的尺寸。

var testDom = document.getElementById('test')

testDom.innerHTML = '屏幕寬度: ' + screen.width + '<br>視覺視口: ' + window.innerWidth + '<br>佈局視口: ' + document.documentElement.clientWidth

// 如下代碼表示 3 秒後，頁面縮放從 100% 到 200%
setTimeout(function() {
  var metaDom = document.createElement('meta')

  metaDom.setAttribute('name', 'viewport')
  metaDom.setAttribute('content', 'initial-scale=2')
  document.querySelector('head').append(metaDom)
  testDom.innerHTML = '屏幕寬度: ' + screen.width + '<br>視覺視口: ' + window.innerWidth + '<br>佈局視口: ' + document.documentElement.clientWidth
}, 3000)
複製代碼

理想視口

佈局視口在大多數狀況下對用戶都是不友好的，雖然保留了網頁的完整性，可是犧牲了可用性，換句話說就是 佈局視口默認的寬度並非一個理想的寬度。因此蘋果引入了理想視口的概念：理想視口是對設備來講最理想的佈局視口尺寸。

能夠經過下面的代碼告訴瀏覽器使用它的理想視口：

<meta name="viewport" content="width=device-width">
複製代碼

注意：

• 理想視口的尺寸是由瀏覽器廠商決定的，開發者只能使用，並且同一設備的不一樣瀏覽器能夠有不一樣的尺寸
• 不一樣設備的相同瀏覽器理想視口尺寸也會不一樣(由於屏幕寬度不一樣，好比手機和平板)
• 會隨着設備轉向改變

PS：能夠經過 screensiz 查看相關設備的理想視口尺寸。

縮放

對於縮放，首先要搞明白一點，縮放是相對於什麼來縮放的。

咱們知道能夠經過設置 meta 視口標籤的 initial-scale 來設置頁面的初始縮放值，那麼當咱們以下設置後：

<meta name="viewport" content="initial-scale=1">
複製代碼

佈局視口尺寸也會被設置爲理想視口尺寸，至關於變相的設置了 width=device-width。由此，咱們能夠獲得 縮放是相對於理想視口來進行 的結論。

若是要把佈局視口設置爲理想視口，使用 width=device-width 與 initial-scale=1 均可以實現，但這二者有個兼容問題，就是 iphone、ipad、IE 會橫豎屏不分，所有以豎屏的高度值做爲理想視口的寬度。因此最好的設置方法是都寫上去，width=device-width 解決 IE 的問題，initial-scale=1 解決 iphone、ipad 的問題：

<meta name="viewport" content="width=device-width, initial-scale=1">
複製代碼

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

縮放是在放大或縮小 CSS 像素，對設備像素無影響。

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

縮放與視口的關係

縮放會影響視覺視口的尺寸，但不會影響佈局視口的尺寸。

手機上頁面被用戶放大，視覺視口縮小，佈局視口不變，視覺視口內的 CSS 像素數量減小；

手機上頁面被用戶縮小，視覺視口放大，佈局視口不變，視覺視口內的 CSS 像素數量增多；

縮放比例

好比說在 iphone 中(理想視口寬度爲 320px)，若是咱們設置 width=device-width, initial-scale=2，此時視覺視口的寬度會變爲 160px，由於咱們放大了一倍，視覺視口縮小了，1px 變得跟原來的 2px 長度同樣，因此放大一倍後，原來須要 320px 才能填滿的寬度只須要 160px 就能填滿。所以，咱們能夠獲得一個公式：

視覺視口寬度 = 理想視口寬度 / 當前縮放比例

當前縮放比例 = 理想視口寬度 / 視覺視口寬度

禁止縮放

若是不但願用戶對網頁進行縮放操做，能夠經過設置 user-scalable=no 來達到禁止縮放的效果。

總結

本篇文章主要介紹了移動端適配須要理解的幾個基礎概念，包括 像素，視口，縮放，以及它們之間的相互關係。只有正確理解了這些概念才能很好的掌握移動端適配的方案及各類方案的工做機制，避免知其然不知其因此然的問題。

下一篇文章咱們會詳細的介紹常見的四種移動端適配方案，請期待~

參考資料

• 移動端適配方案(上)
• ppk的移動端系列文章
• 設備像素，設備獨立像素，CSS像素
• CSS像素、物理像素、邏輯像素、設備像素比、PPI、Viewport
• 前端開發中像素的概念
• 前端工程師須要明白的「像素」