高清屏概念解析與檢測設備像素比的方法 #29

前言

作移動端h5開發好久了，從開始入行到如今。不少知識和工具都是在用前輩留下的遺產，都沒有深刻的研究過緣由，瞭解爲何要這麼去作。

也許本身也是過了交給本身作什麼就作什麼的階段了。在國慶節有一個大塊的時間，把最近看到的知識總結一下，也算是對這方面的知識劃上一個句號。想一想着實把國慶節過成了勞動節，沒辦法，本身就是這樣的一我的，「應該去作的，並且有能力作的，若是不去作，內心面老是不舒服」。

這篇文章的內容主要分爲兩個部分：

1. 高清屏（Retina）相關概念解析和高清屏（Retina）與前端開發的關係；
2. 前端開發過程當中使用什麼手段區分高清屏和普通屏幕，而且衍生出的適配方案；

注：本篇文章的全部圖片來源於網絡，若有侵權請告知。

高清屏（Retina）概念解析和前端開發的關係

1. 高清屏概念解析

高清屏（Retina）概念的興起主要是從喬幫主發佈 Retina 設備開始興起。主要功能以下：

具有足夠高的物理像素密度而令人體肉眼沒法分辨其中單獨像素點的液晶屏。

特色以下：

1. 一種具有超高像素密度的液晶屏；
2. 一樣大小屏幕上顯示的像素點由一個變爲多個；

看一張喬幫主當年發佈 **高清屏（Retina）**時的一張照片：

由喬幫主背後的那兩張圖能夠發現，高清屏和普通平的主要區別：高清屏（Retina）和普通屏相比，相同區域的物理像素點數，高清屏是普通屏的4倍。

2.物理像素點和css的關係

先來看一張圖：

由上面的圖咱們能夠知道，當咱們使用css設置了一個區域之後，高清屏含有的像素點數是普通屏的4倍。而css設置的像素值（px）屬於普通像素點，或者是標準像素點。

那麼咱們平時在普通屏幕中正常顯示的位圖圖像放在高清的屏幕上會有什麼問題呢？由上面的知識能夠知道，普通屏幕的1個CSS像素點對應4個高清屏幕的像素點，1個分紅4個，不夠分的狀況下，顏色會取近似值。因此在高清屏上，在普通屏幕正常顯示的圖片會變的模糊。

能夠看下圖來加深理解：

這就是爲何咱們如今的設計稿爲何都會設計成2倍稿的緣由。爲了兼容高清屏幕的圖片高清晰顯示，咱們的裁切圖是2倍圖，在css中使用的時候會使用css壓縮2倍。

好比，咱們有一個icon.png的文件，切圖大小是 200x200 。而咱們使用的時候倒是使用css設置其大小爲100x100。這樣基本上就會保證普通屏和高清屏顯示一致。

css壓縮真的能保證徹底一致麼？

看了一些網友的文章。css壓縮會使圖片邊緣的銳度減少。

下面是我作的一個簡單的實驗，好比說我如今有一個276x90的圖標文件。我直接把它設置爲一個div的背景，在瀏覽器中看效果：

代碼以下：

<div class="item3"></div> 

.item3{
    height:45px; width:138px; background:url(./4.png) no-repeat center; background-size:100% 100%; }

在網頁中的效果以下圖：

我把這張圖截取下來放到 PS 中放大，以後的效果以下圖，能夠明顯看到在有顏色的字體邊緣的顏色變淺，圖像周圍的銳度減少。

其實，在咱們的開發過程當中徹底沒有必要去在乎這裏的這個細節問題，圖像邊緣的銳度也是在 PS 中放大了好多倍之後纔看出來的，若是是人的肉眼是根本看不出來的。

2. 高清屏（Retina）和前端開發的關係

由上面的知識能夠知道。當咱們在高清屏中使用普通圖片的時候，至關於圖片被放大了一倍（能夠這麼理解：普通屏幕的1px至關於高清屏的2px）。

由於安卓產品的良莠不齊和廠商對屏幕製造標準的標準不同。這個放大的比例並非固定的。還好咱們有一個叫設備像素比的東西來檢測當前屏幕是否是屬於高清屏幕。

設備像素比的英文單詞爲devicePixelRatio。它有一個計算公式以下：

devicePixelRatio=屏幕物理像素/設備獨立像素

devicePixelRatio其實就是window對象的一個屬性，它被大多數的webkit瀏覽器所支持。看下圖是我在個人MacBook Pro上的Chrome中作的測試。很明顯是屬於高清屏哈ヾ(=^▽^=)ノ

上面是對設備像素比的東西 作了一個簡單的瞭解，下面就來詳細瞭解下幾個比較重要的概念。

**設備獨立像素（device independent pixels）**又叫dip或者是dp。它能夠用來輔助區分高清屏幕和非高清屏幕。

咱們能夠經過兩個典型的手機來理解上面的概念。iphone3gs和iphone4的屏幕最大的區別就是前者是普通屏幕然後者是使用了高清的retina屏幕。如下是我查到的一些參數信息：

下面的是iphone3gs屏幕信息：

下面是iphone4s屏幕信息：

在iphone3gs垂直的時候，屏幕的寬度爲320物理像素。當咱們使用<meta name="viewport" content="width=device-width">的時候，會設置視窗佈局寬度爲屏幕的寬度320px，因而頁面就很天然的覆蓋在屏幕上。

因此在iphone3gs上屏幕的物理像素位320像素，獨立像素也是320像素。所以window.devicePixelRatio=1。

而對於iphone4s來講，當屏幕縱向顯示的時候，屏幕的物理像素是640像素，而視區寬度不是640像素而是320像素。

這樣在iphone4s上，屏幕的物理像素爲640像素，獨立像素仍是320像素，所以window.devicePixelRatio=2。

由上面的舉例相信已經對設備的物理像素和獨立像素有了一個認識，那麼總結以下：

• 設備的物理像素（也叫設備像素），就是屏幕顯示顏色的最小的物理單元，也就是咱們常常看到的手機分辨率所描述的數字；
• 設備獨立像素（與密度無關的像素），就是咱們手機的實際的視窗口的大小。具體來講能夠認爲是計算機座標系統中得一個點，這個點表明一個能夠由程序使用的虛擬像素(好比: css像素)，而後由相關係統轉換爲物理像素。

怎麼區分高清屏和普通屏幕及其適配方案

經過對於第一部分的瞭解，咱們可能已經知道怎麼區分高清屏和普通屏了。網上網友總結的結論以下：

經過計算 devicePixelRatio 的值，是能夠區分普通顯示屏和高清顯示器，當devicePixelRatio值等於1時（也就是最小值），那麼它普通顯示屏，當devicePixelRatio值大於1(一般是1.五、2.0)，那麼它就是高清顯示屏。

那麼這部分，就來簡單的瞭解下咱們平時在開發過程當中，對於咱們使用的圖片怎麼適配高清屏和普通屏。

原理也很簡單，就是根據不一樣的設備像素比來加載不一樣的圖片:

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

1.Media Queries的解決方案

根據屏幕的設備像素比來加載不一樣圖片可使用css 的media queries來解決，固然使用css來解決也是兼容性最好的解決方案（其實意味這咱們要切兩套圖片1倍圖和2倍圖）。

示例的demo以下：

.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); } } 

CSS Media Queries的優勢

• 只有對應的目標元素纔會下載圖片資源
• 跨瀏覽器兼容
• 像素能夠精確控制

  CSS Media Queries的缺點

• 單調無味的實現過程，特別是大型項目中
• 只能經過HTML元素的背景圖片來實現，無任何語義化可言

2.JavaScript的解決方案

使用js對「window.devicePixelRatio」進行判斷，而後根據對應的值給Retina屏幕選擇圖像。

$(document).ready(function(){ if (window.devicePixelRatio > 1) { var lowresImages = $('img'); images.each(function(i) { var lowres = $(this).attr('src'); var highres = lowres.replace(".", "@2x."); $(this).attr('src', highres); }); } }); 

Javascript查詢的優勢

• 易於實施
• 非Retina屏幕不用下載過大的資源
• 像素精確控制

  Javascript查詢的缺點

• Retina屏幕下必須下載標準備和高精密度的兩個資源
• Retina屏幕下圖像交互可見
• 瀏覽器兼容性不強

3.使用SVG矢量圖像

SVG矢量圖的優勢

• 一個資源適合全部設備
• 易於維護
• 面向將來的:可伸縮向量圖形

  SVG矢量圖的缺點

• 沒有像素那樣有精度
• 因爲文件大小，不適合複雜的圖形
• 不支持IE7-8和早期的安卓版本

參考文章：

• 高清顯示屏原理及設計方案
• 設備像素比devicePixelRatio簡單介紹