天天看點
傳回

【原】高清顯示屏原理及設計方案

接近年底了，又到産品們趕KPI的時間，開發也跟着辛苦，于是連續加班了4個星期，項目總算有點起色，也終于擠出點時間，寫篇文章，just for fun ~

高清顯示屏原理 ，之前在團隊内做過的一個類似的分享，因為上次有園友問了我 手機端css sprite 的設計原理，不知道手機端的圖檔為什麼是用2倍大，背景定位又是怎麼計算的呢？其實主要是對retina顯示不了解，今天重新整理下，針對它的原理以及它在移動端HTML5頁面的設計方案，分享給大家~

首先玩個遊戲，大家用手機掃描如下二維碼，看看自己手機的 devicePixelRatio 值， 掃描後，點選"确定"或者"好"，可看到真假喬布斯~

【原】高清顯示屏原理及設計方案
您的手機看到哪個喬布斯呢？devicePixelRatio值分别為1.0、1.5、2.0對應下圖，那麼你是如果1.5及以上，那麼恭喜，你的手機顯示屏是高清分辨率的；如果是1.0，你懂的~
【原】高清顯示屏原理及設計方案
目錄：

  • 高清顯示屏顯示原理
    • retina顯示屏 隻是高清顯示屏的一種
    • 高清顯示屏下圖檔變模糊
    • 常見高清顯示屏中位圖被放大的比例
  • 如何區分普通顯示屏和高清顯示器
  • 如何設計高清背景圖
    • Media Queries 設計高清背景圖
    • image-set 設計retina背景圖

高清顯示屏起源于 retina ，打開維基百科，搜尋 Retina顯示屏 ，它是一種由蘋果公司設計和委托制造的顯示屏，具備足夠高像素密度而使得人體肉眼無法分辨其中單獨像素點的液晶屏。

簡單整理下高清顯示屏原理如下：

  1. 一種具備超高像素密度的液晶屏
  2. 同樣大小的螢幕上顯示的像素點由1個變為多個
【原】高清顯示屏原理及設計方案

随着蘋果的 retina顯示屏 推出以來，很多廠商也開始推出自己的高清顯示屏，如三星手機、魅族手機、小米電視機等，而目前市場的移動裝置大都是高清顯示屏了，其實它們的顯示原理都是來自蘋果的 retina顯示屏，相信把 高清顯示屏 叫做 retina顯示屏 一點也不為過分。

如小米3的高清顯示屏，5英尺的螢幕下分辨率高達1920*1080

【原】高清顯示屏原理及設計方案

了解高清顯示屏的原理後，我們可以想象有2張圖檔在不同的2部手機中，一部是普通顯示屏，一部是高清顯示屏，在同樣大小的螢幕上，高清顯示屏中的位圖會被放大，圖檔會變得模糊。

如retina顯示屏下橋幫主，右邊的圖檔變模糊了，原因是Retina 顯示屏呈現的對比度是普通顯示屏的 4 倍，顯示的像素點由1個變為4個，也就是說圖檔被放大了一倍，進而變得模糊~

【原】高清顯示屏原理及設計方案

我們可以了解到 retina顯示屏 中圖檔被放大的倍數高達 2:1，而其實各種高清顯示屏放大的倍數是不同的，有 1.3:1、1.5:1、2:1、3:1 ，目前最多的是 2:1，而 HTC Butterfly、Nexus 5、Samsung Galaxy S4、 Sony Xperia Z  這個幾個系列的移動裝置，圖檔被放大的倍數高達 3:1

【原】高清顯示屏原理及設計方案

想到文章開頭的遊戲的 devicePixelRatio 值，通過它的數值來區分普通顯示屏和高清顯示器，關于 devicePixelRatio ，這裡推薦大家看這篇文章 《裝置像素比devicePixelRatio簡單介紹》，講得非常好~

簡單介紹下 devicePixelRatio ，它是裝置上實體像素和裝置獨立像素( device-independent pixels (dips) )的比例，即 devicePixelRatio = 螢幕實體像素/裝置獨立像素 

例如iPhone4S，分辨率為：960×640，取螢幕寬度計算，實體像素640px，裝置獨立像素320px，那麼，devicePixelRatio 值為 640px / 320px = 2，又如iPhone3，計算出來的 devicePixelRatio 值為 320px / 320px = 1

那麼，通過計算 devicePixelRatio 的值，是可以區分普通顯示屏和高清顯示器，當devicePixelRatio值等于1時（也就是最小值），那麼它普通顯示屏，當devicePixelRatio值大于1(通常是1.5、2.0)，那麼它就是高清顯示屏

為了更好的提升使用者體驗，節省移動端的流量，針對不同的顯示屏，我們可以采取不用的方案，保證圖檔在不同顯示螢幕下正常展現，這個方法跟設計原生APP中針對不同分辨率采用使用不同圖檔的原理相似~

通過判斷 devicePixelRatio 的值來加載不同尺寸的圖檔

  1. 針對普通顯示屏(devicePixelRatio = 1.0、1.3)，加載一張1倍的圖檔
  2. 針對高清顯示屏(devicePixelRatio >= 1.5、2.0、3.0)，加載一張2倍大的圖檔

由于3.0的手機目前比較少，3.0也加載一張2倍的圖檔是可以接受的。那麼，通過上面的方案，我們不是需要設計2套圖檔，甚至是3套圖檔呢？

具體還是要看産品需求的使用者群、維護成本、産品急需上線等來設計方案，例如使用者群大都是高端手機來的，全部都采用加載一張2倍的圖檔也是可以接受的~

本文建議采用加載2套圖檔~

利用媒體查詢結合 devicePixelRatio 可以區分普通顯示屏和高清顯示屏，并給出了如下CSS設計方案，它是目前相容性最好的一個方案~

.css{/* 普通顯示屏(裝置像素比例小于等于1.3)使用1倍的圖 */ 
    background-image: url(img_1x.png);
}
@media only screen and (-webkit-min-device-pixel-ratio:1.5){
.css{/* 高清顯示屏(裝置像素比例大于等于1.5)使用2倍圖  */
    background-image: url(img_2x.png);
  }
}

 這裡給個 Media Queries 結合雪碧圖的測試demo，有興趣的進入

 image-set 設計retina背景圖

image-set，它是Webkit的私有屬性，也是Css4的一個屬性，目前有一些網站已經使用到它了，大家可以看下W3C的說明 http://dev.w3.org/csswg/css-images/#image-set-notation，它是為了解決Retina螢幕下的圖像顯示而生，據我測試，目前支援蘋果的 retina 顯示屏和部分android 顯示屏，也就是說它的相容性還是挺一般的~

.css{
    background: url(../img/bank_ico.png) no-repeat;/* 不支援image-set的顯示屏 */ 
    background: -webkit-image-set(
                url(../img/bank_ico.png) 1x,/* 支援image-set的浏覽器的[普通螢幕]下 */
                url(../img/bank_ico_retina.png) 2x);/* 支援image-set的浏覽器的[Retina螢幕] */
                
}

這裡給個 image-set 結合雪碧圖的測試demo，有興趣的進入

ok，搞定~

作者：白樹

出處：http://peunzhang.cnblogs.com/

您覺得本文不錯，可打賞部落客，或點選右下角【好文要頂】支援部落客。

【原】高清顯示屏原理及設計方案

很多人在看的文章

《pageResponse - 讓H5适配移動裝置全家》

《移動web資源整理》

《移動web點5像素的秘密》

《移動web使用css3實作跑步》

《移動web頁面使用字型的思考》

《高清顯示屏原理及設計方案》

《css實作兩端對齊的3種方法》

我要贊個

我要評論

我要收藏

傳回頂部

跳到底部

retina 高清顯示屏 devicePixelRatio  雪碧圖 Media 裝置像素比 響應式 移動開發
上一篇: 【原】pageResponse - 讓H5适配移動裝置全家(移動端适配)
下一篇: 【原】css實作兩端對齊的3種方法

繼續閱讀