移動端web開發基礎概念

最近在瞭解移動端web開發的相關知識，有些概念老是模糊不清，此次花費了一些時間總體的梳理了一遍。

分辨率

分辨率能夠從顯示分辨率與圖像分辨率兩個方向來分類。顯示分辨率(屏幕分辨率)是屏幕圖像的精密度，是指顯示器所能顯示的像素有多少。圖像分辨率則是單位英寸中所包含的像素點數，其定義更趨近於分辨率自己的定義。——360百科

顯示分辨率指顯示器所能顯示的像素多少。如iPhone的分辨率：640x960，640x1136等。圖像分辨率指單位英寸中所包含的像素點數（PPI）。以下圖中PS新建文件的截圖。

PPI

PPI所屬的上下文環境不一樣，意義也會不同。當咱們在談論顯示設備的PPI時，它指的是屏幕像素密度；和圖片相關時，咱們談論的是打印時的分辨率或打印機的打印精度（在此種狀況下，便是上文中提到的圖像分辨率）。
在這裏咱們只關注屏幕像素密度。
讓咱們再次回到概念，每英寸的像素數量。英寸是長度單位，即它指的是長、寬、對象線每英寸裏的像素數量。在1英寸的長度裏，像素數量越多，PPI值越大。

PPI有相應的計算公式：PPI=√（X^2+Y^2）/ Z （X：長度像素數；Y：寬度像素數；Z：屏幕尺寸）。
以下圖，是蘋果6s的部分規格參數，根據公式計算能夠得出：PPI=√（1334^2+750^2）/ 4.7=325.6≈326。與蘋果提供的參數相符。
在下圖中，屏幕分辨率，屏幕尺寸，PPI都是官方給出的數據。能夠知道，這三個數據都是固定的值，它只與手機的型號有關。所以，此處的像素應該是設備像素或物理像素。

設備像素和css像素

設備像素

設備像素：定義了咱們使用的設備的分辨率，通常來講能夠經過screen.width/height來獲得屏幕的大小。這個值是固定的，它只與設備有關。

css像素

css像素：又稱設備獨立像素（DIP），獨立於設備的用於邏輯上衡量像素的單位。它的寬度不是一個固定的值。
好比在網頁上建立一個width:500px;height:500px的div;當默認縮放比爲100%的時候，一個css像素對應一個設備像素。當經過瀏覽器的縮放功能來改變縮放比爲200%的時候，一個css像素的寬度等於兩個設備像素的寬度。此時div的寬高仍然是500px * 500px。可是一個css像素的大小卻等於4個設備像素的大小。

高清顯示屏

高清顯示屏起源於retina。它是一種由蘋果公司設計和委託製造的顯示屏。它的特色是，具有足夠高的像素密度而令人眼沒法分辨其中單獨像素點的液晶屏。
以下圖，假設屏幕大小爲1英寸，左圖是普通屏，右圖是retina屏，能夠看出，右圖的像素密度要遠大於左圖。在常規的縮放比（100%）下，藍色部分是須要在網頁上展現的地方。根據一個css像素對應一個物理像素，能夠知道，右圖的顯示部分視覺上看起來將會特別小。
爲了讓左右圖在視覺上看起來同樣，咱們須要作的，就是讓右邊的圖的1個css像素等於多個物理像素的大小。即將圖片進行了一個放大處理。可是這樣作的後果就是圖片在視覺上變模糊了。
在移動端開發中，咱們經常須要爲高清顯示屏準備2倍大小的圖片，就是爲了不圖片放大而發生模糊。

設備像素比devicePixelRatio

devicePixelRatio = 物理像素 / 設備獨立像素（css像素）
設備像素比能夠用來區分普通顯示屏和高清顯示屏。devicePixelRatio值在1.5及以上的手機屏幕，是高清顯示屏，爲1.0爲普通屏。
如，iPhone4的物理像素寬度爲640px;css像素寬度爲320px;能夠得出devicePixelRation = 2;能夠知道，iPhone4是高清顯示屏。
在移動web開發中，爲了讓retina屏下的圖片也能夠清晰顯示，咱們須要給retina屏準備另外一套大尺寸的圖片，確保圖片不會放大而變模糊。咱們能夠根據devicePixelRatio值來判斷應該加載的圖片尺寸。

.css{/* 普通顯示屏(設備像素比例小於等於1.3)使用1倍的圖 */ 
    background-image: url(img_1x.png);
}
@media only screen and (-webkit-min-device-pixel-ratio:1.5){
.css{/* 高清顯示屏(設備像素比例大於等於1.5)使用2倍圖  */
    background-image: url(img_2x.png);
  }
}