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

阿新 • • 發佈：2019-01-14

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

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

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

您的手機看到哪個喬布斯呢？devicePixelRatio值分別為1.0、1.5、2.0對應下圖，那麼你是如果1.5及以上，那麼恭喜，你的手機顯示屏是高清解析度的；如果是1.0，你懂的~

高清顯示屏顯示原理

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

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

一種具備超高畫素密度的液晶屏
同樣大小的螢幕上顯示的畫素點由1個變為多個

retina顯示屏只是高清顯示屏的一種

隨著蘋果的 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 的值來載入不同尺寸的圖片

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

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

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

本文建議採用載入2套圖片~

Media Queries 設計高清背景圖

利用媒體查詢結合 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，搞定~

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