移動web開發之像素和DPR

標籤：

×目錄[1]定義 [2]分類 [3]3P[4]縮放[5]DPR[6]API前面的話

　　像素在web開發中幾乎天天用到，但到底什麼是像素，移動端和案頭端的像素有區別嗎，縮放對像素有影響嗎，視網膜螢幕和像素有什麼關係？關於這些問題，可能就說不清楚了。本文將介紹關於像素的相關知識

 

定義

　　像素，又稱畫素，是映像顯示的基本單位，譯自英文“pixel”，pix是英語單詞picture的常用簡寫，加上英語單詞“元素”element，就得到pixel，故“像素”表示“映像元素”之意，有時亦被稱為pel(picture element)

　　像素是網頁布局的基礎。一個像素就是電腦能夠顯示一種特定顏色的最小地區。當裝置尺寸相同但像素變得更密集時，螢幕能顯示的畫面的過渡更細緻，網站看起來更明快。

　　//ppi是指螢幕上每英寸可以顯示的像素點的數量，即螢幕像素密度

 

分類

　　實際上像素分為兩種：裝置像素和CSS像素

　　1、裝置像素(device independent pixels): 裝置螢幕的物理像素，任何裝置的物理像素的數量都是固定的

　　2、CSS像素(CSS pixels): 又稱為邏輯像素，是為web開發人員創造的，在CSS和javascript中使用的一個抽象的層

//我們通過CSS和javascript代碼設定的像素都是邏輯像素width:300px;font-size: 16px;

 

DP/PT/SP

　　有些人將DP、PT、SP這三個概念簡稱為3P，貌似又是新名詞，實際上，僅僅是物理像素的3種稱呼

　　IOS中的物理像素叫做PT（Point，顯示點）

　　Android中叫做DP/DiP（Device independent Pixel，裝置無關像素）

　　SP（Scale-independent pixel）是縮放無關的像素，與DP和PT一樣都是物理像素，只不過用於描述字型的大小

　　我們常說的手機螢幕解析度的像素單位指的是物理像素，比如iphone5s解析度是1136*640，實際上是1136pt*640pt

 

縮放

　　在案頭端，css的1個像素往往都是對應著電腦螢幕的1個物理像素。

　　//一個CSS像素完全覆蓋了一個裝置像素　

　

　　而在手機端，由於螢幕尺寸的限制，縮放是經常性的操作。

　　//裝置像素(深藍色背景)、CSS像素(半透明背景)
　　//左圖表示當使用者進行縮小操作時，一個裝置像素覆蓋了多個CSS像素
　　//右圖表示當使用者進行放大操作時，一個CSS像素覆蓋了多個裝置像素

　　不論我們進行縮小或放大操作，元素設定的CSS像素(如width:300px)是始終不變的，而一個CSS像素對應多少個裝置像素是根據當前的縮放比例來決定的

 

DPR

　　裝置像素比DPR(devicePixelRatio)是兩個像素的比值

DPR = 裝置像素 / CSS像素(某一方向上)

　　在早先的行動裝置中，並沒有DPR的概念，因為裝置像素和CSS像素總是相等的。隨著技術的發展，行動裝置的螢幕像素密度越來越高。從iphone4開始，蘋果公司推出了所謂的retina視網膜螢幕。之所以叫做視網膜螢幕，是因為螢幕的PPI(螢幕像素密度)太高，人的視網膜無法分辨出螢幕上的像素點。iphone4的解析度提高了一倍，但螢幕尺寸卻沒有變化，這意味著同樣大小的螢幕上，像素多了一倍，於是DPR = 2

　　以iphone5為例，iphone5的裝置解析度640dp*1136dp，而CSS表示為320px*568px。所以iphone5的DPI=2

    640(dp) / 320(px)  = 2    1136(dp) / 568(px) = 2    640(dp)*1136(dp) /  320(px)*568(px) = 4

 

API

　　對於螢幕裝置像素和裝置像素比DPR都有相應的javascript屬性

    screen.width 螢幕寬度    screen.height 螢幕高度    window.devicePixelRatio 裝置像素比

　　[注意]前面介紹過，通過CSS和javascript代碼設定的像素都是邏輯像素(CSS像素)，所以擷取到的螢幕寬度和高度的單位也是px

　　所以，iphone5的螢幕尺寸是568px*320px，裝置像素比DPR是2，解析度是1136pt*640pt

移動web開發之像素和DPR