設備像素比(DPR)

設備像素比(Device Pixel Ratio, DPR):其實指的是 window.devicePixelRatio, 被所有WebKit瀏覽器以及Opera所支持诡必,一個設備的物理像素與邏輯像素之比奢方。

DPR = 物理像素(設備像素) / 獨立像素(CSS像素)

當像素比為1:1時,使用1個物理像素顯示1個CSS像素爸舒;當像素比為2:1時蟋字,使用4個物理像素顯示1個CSS像素;當像素比為3:1時扭勉,使用9(33)個設備像素顯示1個CSS像素*鹊奖。

設備像素比

像素為什么會有“物理”和“邏輯”之分,它們之間什么區(qū)別涂炎?

其實在很久以前忠聚,的確是沒區(qū)別的,CSS里寫個 1 px 唱捣,屏幕就給你渲染成1個實際的像素點两蟀,DPR=1,多么簡單自然~

后來蘋果公司為其產(chǎn)品mac震缭、iPhone以及iPad的屏幕配置了Retina高清屏赂毯,也就是說這種屏幕擁有的物理像素點數(shù)比非高清屏多4倍甚至更多。如果還按照DPR=1進行展示拣宰,那么同一張圖片在高清屏上面顯示的區(qū)域面積會是非高清屏的1/4党涕,這樣的話由于圖片在屏幕上的展示面積大大縮小,也會導致出現(xiàn)“看不清”的問題巡社。

舉個例子膛堤,iPhone 6的物理像素上面已經(jīng)說了,是 750 * 1334晌该,那它的邏輯像素呢肥荔?我們只需在 iPhone 6 的Safari里打印一下 screen.widthscreen.height 就知道了绿渣,結果是 375 * 667,這就是它的邏輯像素次企,據(jù)此很容易計算出 DRP為2怯晕。當然,我們還可以直接通過 window.devicePixelRatio 這個值來獲取 DRP缸棵,打印結果是 2舟茶,符合我們的預期。

舉例:
設備寬高為 375×667堵第,可以理解為設備獨立像素(或css像素)吧凉,dpr為2,根據(jù)上面的計算公式踏志,其物理像素就應該 ×2阀捅,為 750×1334

設備像素比

上圖中可以看出针余,對于這樣的css樣式:

width: 1px;
height: 1px;

相同尺寸下饲鄙,普通屏幕 VS Retina 屏,css像素所呈現(xiàn)的物理尺寸(大性惭恪)是一致的忍级,不同的是一個css像素所對應的物理像素的個數(shù)不一致:

  • 普通屏幕:css像素:物理像素 = 1:1
  • retina屏: css像素:物理像素 = 1:4

即4個物理像素顯示一個css像素

從以上現(xiàn)象得出的結論是

UI設計師按照手機物理像素出設計稿伪朽,切圖時根據(jù)其設備像素比來換算設備獨立像素(CSS像素)轴咱,比如視網(wǎng)膜手機iPhone6,物理像素 750px×1334px烈涮,由于其設備像素比為2朴肺,CSS切圖時需要將設計稿的所有尺寸除以2,才是正確CSS像素值坚洽。

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末戈稿,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子讶舰,更是在濱河造成了極大的恐慌器瘪,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,402評論 6 499
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件绘雁,死亡現(xiàn)場離奇詭異,居然都是意外死亡援所,警方通過查閱死者的電腦和手機庐舟,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,377評論 3 392
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來住拭,“玉大人挪略,你說我怎么就攤上這事历帚。” “怎么了杠娱?”我有些...
    開封第一講書人閱讀 162,483評論 0 353
  • 文/不壞的土叔 我叫張陵挽牢,是天一觀的道長。 經(jīng)常有香客問我摊求,道長禽拔,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,165評論 1 292
  • 正文 為了忘掉前任室叉,我火速辦了婚禮睹栖,結果婚禮上,老公的妹妹穿的比我還像新娘茧痕。我一直安慰自己野来,他們只是感情好,可當我...
    茶點故事閱讀 67,176評論 6 388
  • 文/花漫 我一把揭開白布踪旷。 她就那樣靜靜地躺著曼氛,像睡著了一般。 火紅的嫁衣襯著肌膚如雪令野。 梳的紋絲不亂的頭發(fā)上舀患,一...
    開封第一講書人閱讀 51,146評論 1 297
  • 那天,我揣著相機與錄音彩掐,去河邊找鬼构舟。 笑死,一個胖子當著我的面吹牛堵幽,可吹牛的內容都是我干的狗超。 我是一名探鬼主播,決...
    沈念sama閱讀 40,032評論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼朴下,長吁一口氣:“原來是場噩夢啊……” “哼努咐!你這毒婦竟也來了?” 一聲冷哼從身側響起殴胧,我...
    開封第一講書人閱讀 38,896評論 0 274
  • 序言:老撾萬榮一對情侶失蹤渗稍,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后团滥,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體竿屹,經(jīng)...
    沈念sama閱讀 45,311評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,536評論 2 332
  • 正文 我和宋清朗相戀三年灸姊,在試婚紗的時候發(fā)現(xiàn)自己被綠了拱燃。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,696評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡力惯,死狀恐怖碗誉,靈堂內的尸體忽然破棺而出召嘶,到底是詐尸還是另有隱情,我是刑警寧澤哮缺,帶...
    沈念sama閱讀 35,413評論 5 343
  • 正文 年R本政府宣布弄跌,位于F島的核電站,受9級特大地震影響尝苇,放射性物質發(fā)生泄漏铛只。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,008評論 3 325
  • 文/蒙蒙 一茎匠、第九天 我趴在偏房一處隱蔽的房頂上張望格仲。 院中可真熱鬧,春花似錦诵冒、人聲如沸凯肋。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽侮东。三九已至,卻和暖如春豹芯,著一層夾襖步出監(jiān)牢的瞬間悄雅,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,815評論 1 269
  • 我被黑心中介騙來泰國打工铁蹈, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留宽闲,地道東北人。 一個月前我還...
    沈念sama閱讀 47,698評論 2 368
  • 正文 我出身青樓握牧,卻偏偏與公主長得像容诬,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子沿腰,可洞房花燭夜當晚...
    茶點故事閱讀 44,592評論 2 353

推薦閱讀更多精彩內容