接近年底了，又到產品們趕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個變為多個

?

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，搞定~

轉載于:https://www.cnblogs.com/PeunZhang/p/3441110.html

總結

以上是生活随笔為你收集整理的【原】高清显示屏原理及设计方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。