移動web開發之像素和DPR

前面的話

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

 

定義

　　像素，又稱畫素，是圖像顯示的基本單位，譯自英文「pixel」，pix是英語單詞picture的經常使用簡寫，加上英語單詞「元素」element，就獲得pixel，故「像素」表示「圖像元素」之意，有時亦被稱爲pel(picture element)

　　像素是網頁佈局的基礎。一個像素就是計算機可以顯示一種特定顏色的最小區域。當設備尺寸相同但像素變得更密集時，屏幕能顯示的畫面的過渡更細緻，網站看起來更明快。

　　//ppi是指屏幕上每英寸能夠顯示的像素點的數量，即屏幕像素密度

 

分類

　　實際上像素分爲兩種：設備像素和CSS像素

　　一、設備像素(device independent pixels): 設備屏幕的物理像素，任何設備的物理像素的數量都是固定的

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

　　每個CSS聲明和幾乎全部的javascript屬性都使用CSS像素，所以實際上歷來用不上設備像素 ，惟一的例外是screen.width/height

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

 

縮放

　　在桌面端，css的1個像素每每都是對應着電腦屏幕的1個物理像素。

　　//一個CSS像素徹底覆蓋了一個設備像素　

　

　　而在手機端，因爲屏幕尺寸的限制，縮放是常常性的操做。

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

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

 

DPR

　　設備像素比DPR(devicePixelRatio)是默認縮放爲100%的狀況下，設備像素和CSS像素的比值

DPR = 設備像素 / CSS像素(某一方向上)

　　在早先的移動設備中，並無DPR的概念。隨着技術的發展，移動設備的屏幕像素密度愈來愈高。從iphone4開始，蘋果公司推出了所謂的retina視網膜屏幕。之因此叫作視網膜屏幕，是由於屏幕的PPI(屏幕像素密度)過高，人的視網膜沒法分辨出屏幕上的像素點。iphone4的分辨率提升了一倍，但屏幕尺寸卻沒有變化，這意味着一樣大小的屏幕上，像素多了一倍，因而DPR = 2

　　實際上，此時的CSS像素對應着之後要提到的理想視口，其對應的javascript屬性是screen.width/screen.height

　　而對於設備像素比DPR也有對應的javascript屬性window.devicePixelRatio

　　以iphone5爲例，iphone5的CSS像素爲320px*568px，DPR是2，因此其設備像素爲640px*1136px

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