【原】高清顯示屏原理及設計方案
接近年底了,又到產品們趕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
如何區分普通顯示屏和高清顯示器
想到文章開頭的遊戲的 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,搞定~
相關推薦
【原】高清顯示屏原理及設計方案
接近年底了,又到產品們趕KPI的時間,開發也跟著辛苦,於是連續加班了4個星期,專案總算有點起色,也終於擠出點時間,寫篇文章,just for fun ~ 高清顯示屏原理 ,之前在團隊內做過的一個類似的分享,因為上次有園友問了我 手機端css sprite 的設計原理,不知道手機端的圖片為什麼是用2倍大,背景
【Java】Java8 HashMap工作原理及實現
1 、概述 從本文你可以學到 什麼時候會使用HashMap?他有什麼特點? 你知道HashMap的工作原理嗎? 你知道get和put的原理嗎?equals()和hashCode()的都有什麼作用? 你知道hash的實現嗎?
【原】高光貼圖引數放入顏色貼圖的alpha通道中
今天美術想把高光貼圖引數合成到Main貼圖中,減少貼圖數,挺好,知道省記憶體了。 於是簡單改了改surface著色器。 Shader "Custom/HighLightByAlphaPass" { Properties {  
【原】高光貼圖參數放入顏色貼圖的alpha通道中
llb ceo -- shade struct surf render fall diffuse 今天美術想把高光貼圖參數合成到Main貼圖中,減少貼圖數,挺好,知道省內存了。 於是簡單改了改surface著色器。 Shader "Custom/HighLightByAlp
【NLP】CNN文字分類原理及python程式碼實現
CNN分類模型架構 python程式碼實現: #!/usr/bin/python # -*- coding: utf-8 -*- import tensorflow as tf class TCNNConfig(object): #class TCNNConfig(
【MyBatis】MyBatis Tomcat JNDI原理及原始碼分析
一、 Tomcat JNDI JNDI(java nameing and drectory interface),是一組在Java應用中訪問命名和服務的API,所謂命名服務,即將物件和名稱聯絡起來,使得可以通過名稱訪問並獲取物件。 簡單
【原】Cause: se.spagettikod.optimist.RemovedByAnotherUserException解決方案
如果 sql mis 異常 efault 都是 這樣的 other 遇到 遇到這種問題,大多都會覺得很簡單,不就是要更新的某條數據已經被刪除了嗎?確實大多數都是這樣的情況。然而,昨天遇到這個異常時,找了很久很久,已經斷定之前沒有任何刪除操作。Mapper文件等一切配置都正確
【原】Java反射機制的原理及在Android下的簡單應用
轉載地址:http://www.cnblogs.com/crazypebble/archive/2011/04/13/2014582.html 花了幾天時間,研究了一下Java的反射機制。在這裡總結一下這幾天學習的成果,一來分享自己的學習過程
【原】無腦操作:Windows 10 + MySQL 5.5 安裝使用及免安裝使用
界面 圖標 ini文件 字符集設置 exe 可能 mon rem 選擇 本文介紹Windows 10環境下, MySQL 5.5的安裝使用及免安裝使用 資源下載: MySQL安裝文件:http://download.csdn.net/detail/lf19820717/
【原】無腦操作:IDEA + maven + SpringBoot + JPA + Thymeleaf實現CRUD及分頁
xtend sla lns ase tid item pen element per 一、開發環境: 1、windows 7 企業版 2、IDEA 14 3、JDK 1.8 4、Maven 3.5.2 5、MariaDB 6、SQLYog 二、Maven設
【Ceph系列01】Ceph的工作原理及流程
-o 尋址 ofo color proc 分享圖片 tac ges sha 首先我們了解一下Ceph系統中的尋址流程,如下圖所示: 本文部分參考來自 http://www.csdn.net/article/2014-04-08/2819192-ceph-swift-on
父與子的編程之旅【第二版】高清中文版PDF+高清英文版PDF+源代碼
img 經典 baidu ges ofo term 英文版 分享圖片 英文 下載:https://pan.baidu.com/s/17jzBzVdQ2XMmRIrOZhMnDQ 《父與子的編程之旅【第二版】》高清中文版PDF+高清英文版PDF+源代碼 高清中文版PDF,帶目
【轉載】Elasticsearch-基礎介紹及索引原理分析
ES基礎資料結構分析的非常透徹,倒排索引,跳錶,壓縮技巧,聯合索引等 轉載:https://www.cnblogs.com/dreamroute/p/8484457.html 最近在參與一個基於Elasticsearch作為底層資料框架提供大資料量(億級)的實時統計查詢的方案設計工作,花
【RPC入門】RPC概念、原理及開發
RPC基礎概念 RPC(Remote Procedure Call)—遠端過程呼叫,它是一種通過網路從遠端計算機程式上請求服務,而不需要了解底層網路技術的協議。 在一般的應用程式中,被呼叫的過程在相同的地址空間中執行,並把結果返回給發出呼叫的過程。在分散式環境中,客戶機和伺服器在不同的機
【原】無腦操作:Gitblit伺服器搭建及IDEA整合Git使用
1 <?xml version="1.0" encoding="UTF-8"?> 2 <project xmlns="http://maven.apache.org/POM/4.0.0" 3 xmlns:xsi="http://www.w3.org/2001/XM
【進階3-5期】深度解析 new 原理及模擬實現
本週的主題是this全面解析,本計劃一共28期,每期重點攻克一個面試重難點,如果你還不瞭解本進階計劃,文末點選檢視全部文章。 如果覺得本系列不錯,歡迎點贊、評論、轉發,您的支援就是我堅持的最大動力。 介紹下定義 new 運算子建立一個使用者定義的物件型別的例項或具有建構函式的內建物件的例項。
【進階3-5期】深度解析 new 原理及模擬實現(轉)
這是我在公眾號(高階前端進階)看到的文章,現在做筆記 https://github.com/yygmind/blog/issues/24 new 運算子建立一個使用者定義的物件型別的例項或具有建構函式的內建物件的例項。 ——(來自於MDN) 舉個例子: function Car(color) {
【排序演算法】希爾排序原理及Java實現
1、基本思想: 希爾排序也成為“縮小增量排序”,其基本原理是,現將待排序的陣列元素分成多個子序列,使得每個子序列的元素個數相對較少,然後對各個子序列分別進行直接插入排序,待整個待排序列“基本有序”後,最後在對所有元素進行一次直接插入排序。因此,我們要採用跳躍分
【Java面試題】spring+springMVC+mybatis原理及實現機制(持續更新)
本文將持續更新,主要講解SSM框架的底層原理和實現機制等 1.什麼是IOC? IOC即Inverse of Control,它包括兩個內容:控制與反轉 那到底什麼東西的“控制”被“反轉”了呢?對於軟體而言,即是某一個介面具體實現類的選擇控制權從呼叫類中移除,轉交給第三
【CSII-PE】dmconfig.xml實現原理及配置方法
在一部分bundle的程式碼中(例如com.csii.gateway.api),在META-INF目錄下有個peconfig目錄,其中有一個dmconfig.xml檔案。這個檔案中有一些配置資訊: <?xml version="1.0" encoding="UTF