【移動端web開發】（一）基本概念

前言

移動設備愈來愈普及啦，因此咱們不能只停留在開發PC端頁面，和一包一塊兒來學學移動端Web開發吧~

移動開發特色

• 移動端開發對象主要是手持設備，大體爲ios和android系統
• 因爲具有HTML5特性也叫H5頁面
• 基於webkit開發，沒必要考慮瀏覽器兼容性（再見IE；））
• 因爲移動端屏幕尺寸五花八門，所以有更高的適配要求
• 高性能要求

基本概念

視窗 viewport

• 通俗理解，viewport即瀏覽器的窗口，即移動設備屏幕上能用來顯示咱們的網頁的那一塊區域。 通常來說，因爲移動設備分辨率比桌面瀏覽器較小，爲了能在移動設備上正常顯示傳統爲PC設計的網站，移動設備上的viewport都是要大於瀏覽器可視區域的，但帶來的後果就是瀏覽器會出現橫向滾動條，由於瀏覽器可視區域的寬度是比這個默認的viewport的寬度要小的。下圖列出了一些設備上瀏覽器的默認viewport的寬度。

• PPK大神把viewport分爲三種：layout viewport，visual viewport， ideal viewport（ 請參考ppk系列文章）

  屏幕尺寸

• 指屏幕的對角線的長度，單位是英寸，1英寸=2.54釐米。常見的屏幕尺寸有2.四、2.八、3.五、3.七、4.二、5.0、5.五、6.0等。

屏幕分辨率

• 指在橫縱向上的像素點數，單位是px，1px=1個像素點。通常以縱向像素橫向像素來表示一個手機的分辨率，如1960 1080。（這裏的1像素值得是物理設備的1個像素點）

像上面這張圖，把他當作是一個手機屏幕，假設他橫向有1000個格子也就是像素點，縱向有500個格子，那麼他的分辨率就是1000*500

屏幕像素密度

• 屏幕上每英寸能夠顯示的像素點的數量，單位是ppi，即「pixels per inch」的縮寫。屏幕像素密度與屏幕尺寸和屏幕分辨率有關，在單一變化條件下，屏幕尺寸越小、分辨率越高，像素密度越大，反之越小。如iPhone 3GS和iPhone 4的區別。屏幕尺寸同樣，屏幕分辨率相差一倍，屏幕像素密度也相差一倍。如圖：

• PPI的值越高，畫質越好，也就是越細膩。
• PPI的公式

用這個公式咱們能夠計算PPI，以下圖：（橫向和縱向就是咱們剛剛說分辨率爲1000*500的1000和500）

計算結果與圈紅相近

設備獨立像素(density-independent pixel)

• 設備獨立像素也稱爲密度無關像素,又叫dip或者是dp，能夠認爲是計算機座標系統中的一個點，這個點表明一個能夠由程序使用的虛擬像素(好比說CSS像素)，而後由相關係統轉換爲物理像素。
• 它能夠用來輔助區分高清屏幕和非高清屏幕。(能夠看看張鑫旭的文章)

兩個像素

物理像素(physical pixel)

• 物理像素又被稱爲設備像素。在同一個設備上，它的物理像素是固定的，這是廠商在出廠時就設置好了的，即一個設備的分辨率是固定的。
• 設備能控制顯示的最小單位，咱們能夠把這些像素看做成顯示器上一個個的點。

CSS像素

• CSS像素是沒有實際大小的抽象單位，它是一個相對長度，它相對的是電腦或手機顯示器的分辨率。
• 通常狀況之下，CSS像素稱爲與設備獨立像素(device-independent pixel)，簡稱DIPs

css中的1px並不等於設備的1px

• 在css中咱們通常使用px做爲單位，在桌面瀏覽器中css的1個像素每每都是對應着電腦屏幕的1個物理像素，這可能會形成咱們的一個錯覺，那就是css中的像素就是設備的物理像素。
• css中的像素只是一個抽象的單位，在不一樣的設備或不一樣的環境中，css中的1px所表明的設備物理像素是不一樣的。
• PC能夠忽略，可是移動端不能夠。好比在早先的移動設備中，屏幕像素密度都比較低，如iphone3，它的分辨率爲320x480，在iphone3上，一個css像素確實是等於一個屏幕物理像素的。後來隨着技術的發展，移動設備的屏幕像素密度愈來愈高，從iphone4開始，蘋果公司便推出了所謂的Retina屏，分辨率提升了一倍，變成640x960，但屏幕尺寸卻沒變化，這就意味着一樣大小的屏幕上，像素卻多了一倍，這時，一個css像素是等於兩個物理像素的。
• 還有一個因素也會引發css中px的變化，那就是用戶縮放。例如，當用戶把頁面放大一倍，那麼css中1px所表明的物理像素也會增長一倍；反之把頁面縮小一倍，css中1px所表明的物理像素也會減小一倍。

如圖，有四個一像素，縮放比例爲100%,此時，物理像素等於css像素，即重疊：

如圖，當咱們縮小瀏覽器時，CSS像素開始收縮，致使1單位的設備像素上重疊了多個CSS像素

如圖，當咱們放大瀏覽器時，CSS像素開始擴大，致使1單位CSS像素上重疊了多個設備像素

設備像素比(device pixel ratio)

• 設備像素比簡稱爲dpr，其定義了物理像素和設備獨立像素的對應關係。即

設備像素比 ＝ 物理像素 / 設備獨立像素// 在某一方向上，x方向或者y方向

• css中的px能夠當作是設備獨立像素，當dpr爲1:1時，使用1個物理像素顯示1個CSS像素。當dpr爲2:1時，使用4(2*2)個物理像素顯示1個CSS像素，當這個比率爲3:1時，使用9個設備像素顯示1個CSS像素。
• 設備像素比在不一樣的瀏覽器中還存在些許的兼容性問題。如圖：

---

綜合上述概念，咱們看一張圖：

衆所周知，iPhone6的設備寬度和高度爲375pt 667pt,能夠理解爲設備的獨立像素；而其dpr爲2，根據上面公式，咱們能夠很輕鬆得知其物理像素爲750pt 1334pt

在不一樣的屏幕上，CSS像素所呈現的物理尺寸是一致的，而不一樣的是CSS像素所對應的物理像素具數是不一致的。在普通屏幕下1個CSS像素對應1個物理像素，而在Retina屏幕下，1個CSS像素對應的倒是4個物理像素。

---

看到這裏，可能有的同窗以爲什麼屏幕分辨率，屏幕尺寸，ppi不少專業名詞很亂，咱們這裏總結一下

一些名詞的整理

ppi，dpi，dp，dip

• ppi：pixels per inch，屏幕像素密度
• dpi：dots per inch，ppi和dpi是同一個概念，Android比較喜歡使用dpi，IOS比較喜歡使用ppi。
• dp、dip：dp和dip都是Density Independent Pixels的縮寫，設備獨立像素。CSS像素 =設備獨立像素 = 邏輯像素

參考文章

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

深刻了解viewport和px

使用Flexible實現手淘H5頁面的終端適配

viewports剖析

設備像素，設備獨立像素，CSS像素

(整理到想哭哈哈哈)