[移動端]移動端設備屬性

移動端web頁面的開發，由于手機螢屏尺寸、解析度不同，或者需要考慮橫豎屏問題，為了使得web頁面在不同移動設備上具有相適應的展示效果，需要在開發程序中使用合理的適配方案來解決這個問題，

移動端設備的一些屬性

尺寸

想要實作移動端適配 就要認識下 顯示設備的物理尺寸(螢屏對角線長度) 單位 “英寸”

我們用單位英寸描述螢屏的物理大小，如電腦顯示幕的17英寸，22英寸，手機顯示幕的4.8英寸，5.7英寸

英寸（inch，縮寫為in）在荷蘭語中的本意是大拇指，一英寸就是指甲底部普通人拇指的寬度，

英寸單位和厘米的換算：1英寸 = 2.54厘米

解析度

解析度決定了位圖影像細節的精細程度

通常情況下，影像的解析度越高，所包含的像素就越多，影像就越清晰，印刷的質量也就越好，同時，它也會增加檔案占用的存盤空間，

像素

說到像素我們第一時間會想到（Pixel) , 像素即一個小方塊，它具有特定的位置和顏色，

圖片、電子螢屏（手機、電腦）就是由無數個具有特定顏色和特定位置的小方塊拼接而成，

像素可以作為圖片或電子螢屏的最小組成單位，

在我們css布局中使用的px單位像素是一個相對單位，我們稱之為邏輯像素

手機 顯示幕等物理設備上的像素點我們稱之為物理像素

所以對應解析度 我們也會區分出螢屏解析度(物理)和影像解析度(邏輯)，

螢屏解析度

螢屏解析度指的是一個螢屏具體是由多少個物理像素點組成

HUAWEI P40 Pro螢屏解析度為 2640 x 1200 這表示手機分別在垂直和水平上所具有的像素點數，

iPhone XS Max和 iPhone SE的解析度分別為2688 x 1242和1136 x 640，這表示手機分別在垂直和水平上所具有的像素點數，

影像解析度

我們通常說的圖片解析度其實是指圖片含有的像素數，比如一張圖片的解析度為800 x 400，這表示圖片分別在垂直和水平上所具有的像素點數為800和400，

同一尺寸的圖片，解析度越高，圖片越清晰

PPI

PPI(Pixel Per Inch)：每英寸包括的像素數，

PPI可以用于描述螢屏的清晰度以及一張圖片的質量，

使用PPI描述圖片時，PPI越高，圖片質量越高，使用PPI描述螢屏時，PPI越高，螢屏越清晰，

在上面描述手機解析度的圖片中，我們可以看到：iPhone XS Max 和 iPhone SE的PPI分別為458和326，這足以證明前者的螢屏更清晰，

由于手機尺寸為手機對角線的長度，我們通常使用如下的方法計算PPI:

iPhone 6的PPI為

所以它每英寸約含有326個物理像素點，

DPI

DPI(Dot Per Inch)：即每英寸包括的點數，

這里的點是一個抽象的單位，它可以是螢屏像素點、圖片像素點也可以是列印機的墨點，

平時你可能會看到使用DPI來描述圖片和螢屏，這時的DPI應該和PPI是等價的，DPI最常用的是用于描述列印機，表示列印機每英寸可以列印的點數，

一張圖片在螢屏上顯示時，它的像素點數是規則排列的，每個像素點都有特定的位置和顏色，

當使用列印機進行列印時，列印機可能不會規則的將這些點列印出來，而是使用一個個列印點來呈現這張影像，這些列印點之間會有一定的空隙，這就是DPI所描述的：列印點的密度，

在上面的影像中我們可以清晰的看到，列印機是如何使用墨點來列印一張影像，

所以，列印機的DPI越高，列印影像的精細程度就越高，同時這也會消耗更多的墨點和時間，

DIP(設備獨立像素)

實際上，上面我們描述的像素都是物理像素，即設備上真實的物理單元，

下面我們來看看設備獨立像素究竟是如何產生的：

智能手機發展非常之快，在幾年之前，我們還用著解析度非常低的手機A，解析度是320x480，我們可以在上面瀏覽正常的文字、圖片等等，

但是，隨著科技的發展，低解析度的手機已經不能滿足我們的需求了，很快，更高解析度的螢屏誕生了它的解析度是640x940，我們成為手機B

理論上來講，在A手機上相同大小的圖片和文字，在B手機上會被縮放一倍，因為它的解析度提高了一倍，這樣，豈不是后面出現更高解析度的手機，頁面元素會變得越來越小嗎？

然而，事實并不是這樣的，我們現在使用的智能手機，不管解析度多高，他們所展示的界面比例都是基本類似的，喬布斯在iPhone4的發布會上首次提出了Retina Display(視網膜螢屏)的概念，它正是解決了上面的問題，這也使它成為一款跨時代的手機，

在iPhone4使用的視網膜螢屏中，把2x2個像素當1個像素使用，這樣讓螢屏看起來更精致，但是元素的大小卻不會改變，

如果B手機使用了視網膜螢屏的技術，那么顯示結果應該是下面的情況，比如串列的寬度為300個像素，那么在一條水平線上，A手機會用300個物理像素去渲染它，而B手機實際上會用600個物理像素去渲染它，

我們必須用一種單位來同時告訴不同解析度的手機，它們在界面上顯示元素的大小是多少，這個單位就是設備獨立像素(Device Independent Pixels)簡稱DIP或DP，上面我們說，串列的寬度為300個像素，實際上我們可以說：串列的寬度為300個設備獨立像素，

打開chrome的開發者工具，我們可以模擬各個手機型號的顯示情況，每種型號上面會顯示一個尺寸，比如iPhone X顯示的尺寸是375x812，實際iPhone X的解析度會比這高很多，這里顯示的就是設備獨立像素，

DPR(設備像素比)

設備像素比device pixel ratio簡稱dpr，即物理像素和設備獨立像素的比值，

在web中，瀏覽器為我們提供了window.devicePixelRatio來幫助我們獲取dpr，

我們可以通過js來獲取當前設備的dpr

//如果設備是iPhoneX  
window.devicePixelRatio; //3 

在css中，可以使用媒體查詢min-device-pixel-ratio，區分dpr：

@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2){ 
	/*適配IPhone 兩倍屏*/
}

當然，上面的規則也有例外，iPhone 6、7、8 Plus的實際物理像素是1080 x 1920，在開發者工具中我們可以看到：它的設備獨立像素是414 x 736，設備像素比為3，設備獨立像素和設備像素比的乘積并不等于1080 x 1920，而是等于1242 x 2208，

實際上，手機會自動把1242 x 2208個像素點塞進1080 * 1920個物理像素點來渲染，我們不用關心這個程序，而1242 x 2208被稱為螢屏的設計像素，我們開發程序中也是以這個設計像素為準，

實際上，從蘋果提出視網膜螢屏開始，才出現設備像素比這個概念，因為在這之前，移動設備都是直接使用物理像素來進行展示，

緊接著，Android同樣使用了其他的技術方案來實作DPR大于1的螢屏，不過原理是類似的，由于Android螢屏尺寸非常多、解析度高低跨度非常大，不像蘋果只有它自己的幾款固定設備、尺寸，所以，為了保證各種設備的顯示效果，Android按照設備的像素密度將設備分成了幾個區間：

當然，所有的Android設備不一定嚴格按照上面的解析度，每個型別可能對應幾種不同解析度，所以，每個Android手機都能根據給定的區間范圍，確定自己的DPR，從而擁有類似的顯示，當然，僅僅是類似，由于各個設備的尺寸、解析度上的差異，設備獨立像素也不會完全相等，所以各種Android設備仍然不能做到在展示上完全相等，