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

接近年末了，又到產品們趕KPI的時間，開發也跟着辛苦，因而連續加班了4個星期，項目總算有點轉機，也終於擠出點時間，寫篇文章，just for fun ~

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

首先玩個遊戲，你們用手機掃描以下二維碼，看看本身手機的 devicePixelRatio 值， 掃描後，點擊"肯定"或者"好"，可看到真假喬布斯~

 

您的手機看到哪一個喬布斯呢？devicePixelRatio值分別爲1.0、1.五、2.0對應下圖，那麼你是若是1.5及以上，那麼恭喜，你的手機顯示屏是高清分辨率的；若是是1.0，你懂的~

 

目錄：

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

 

高清顯示屏顯示原理

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

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

1. 一種具有超高像素密度的液晶屏

2. 一樣大小的屏幕上顯示的像素點由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 五、Samsung Galaxy S四、 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.五、2.0)，那麼它就是高清顯示屏

如何設計高清背景圖

爲了更好的提高用戶體驗，節省移動端的流量，針對不一樣的顯示屏，咱們能夠採起不用的方案，保證圖片在不一樣顯示屏幕下正常展示，這個方法跟設計原生APP中針對不一樣分辨率採用使用不一樣圖片的原理類似~

經過判斷 devicePixelRatio 的值來加載不一樣尺寸的圖片

1. 針對普通顯示屏(devicePixelRatio = 1.0、1.3)，加載一張1倍的圖片
2. 針對高清顯示屏(devicePixelRatio >= 1.五、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，搞定~