web移動端,需要清楚設備像素比devicePixelRatio的應用

来源:http://www.cnblogs.com/moqiutao/archive/2017/05/06/6818235.html

我們這裡所說的devicePixelRatio其實指的是window.devicePixelRatio, 被所有WebKit瀏覽器以及Opera所支持。 概念 devicePixelRatio ,它是設備上物理像素和設備獨立像素( device-independent pixels (dips) ) ...


我們這裡所說的devicePixelRatio其實指的是window.devicePixelRatio, 被所有WebKit瀏覽器以及Opera所支持。

概念

devicePixelRatio ,它是設備上物理像素和設備獨立像素( device-independent pixels (dips) )的比例,即 devicePixelRatio = 屏幕物理像素/設備獨立像素 

例如iPhone4S,解析度為:960×640,取屏幕寬度計算,物理像素640px,設備獨立像素320px,那麼,devicePixelRatio 值為 640px / 320px = 2,又如iPhone3,計算出來的 devicePixelRatio 值為 320px / 320px = 1

要瞭解其他手機型號的物理像素,獨立像素,設備像素比,請查看http://screensiz.es/phone

在手機上我們一般的圖片在高清顯示屏下會很模糊,那麼什麼是高清顯示屏呢?

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

高清顯示屏原理如下:

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

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

現在知道高清顯示屏了,那麼來分析下一般圖片在其設備上會模糊的原因,假如現在有一張圖片,有兩部手機,一部是普通顯示屏,一部是高清顯示屏,在同樣大小的屏幕上,高清顯示屏中的點陣圖會被放大,圖片會變得模糊。

常見高清顯示屏中點陣圖被放大的比例

我們可以瞭解到 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值等於1時(也就是最小值),那麼它普通顯示屏,當devicePixelRatio值大於1(通常是1.5、2.0),那麼它就是高清顯示屏。

移動端如何調用高清背景圖

為了更好的提升用戶體驗,節省移動端的流量,針對不同的顯示屏,我們可以採取不用的方案,保證圖片在不同顯示屏幕下正常展現,這個方法跟設計原生APP中針對不同解析度採用使用不同圖片的原理相似~

通過判斷 devicePixelRatio 的值來載入不同尺寸的圖片

  1. 針對普通顯示屏(devicePixelRatio = 1.0、1.3),載入一張1倍的圖片
  2. 針對高清顯示屏(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);
  }
}

 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屏幕] */
                
}

參考地址:

設備像素比devicePixelRatio簡單介紹

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


您的分享是我們最大的動力!

更多相關文章
  • 作業二:多級菜單 1.三級菜單 2.可以次選擇進入各子菜單 3.所需新知識點:列表、字典 4.列印b回到上一層 5.列印q退出迴圈 流程圖如下: readme: (1)存儲三級菜單的字典;設置標識符active用來迴圈; (2)生成存儲省市的字典,d1 = {1: '河南', 2: '廣東', 3: ...
  • 寫在前面的話 個人由某方面的興趣需要學習 F#,網路上有關F#的中文資料很少,微軟官方有很不錯的文檔,但是很可惜的是絕大部分的章節都是英文的。個人是一位.NET愛好者,想自己將 F# 的官方文檔翻譯出來,算是為了自己喜歡的 .NET 做一些貢獻。 原文鏈接 Getting started with ...
  • 題目描述 祖瑪是一款曾經風靡全球的游戲,其玩法是:在一條軌道上初始排列著若幹 個彩色珠子,其中任意三個相鄰的珠子不會完全同色。此後,你可以發射珠子到 軌道上並加入原有序列中。一旦有三個或更多同色的珠子變成相鄰,它們就會立 即消失。這類消除現象可能會連鎖式發生,其間你將暫時不能發射珠子。 開發商最近準 ...
  • 最近點用pickPoint來計算,垂點用lastPoint計算. 一般AcDbCurve類可以用AcGe類的 getClosestPointTo 來實現計算需要的點值. 下麵是代碼示例: case AcDb::kOsModeNear: { AcGeLine3d line3d(m_ptA,m_ptC) ...
  • 題目鏈接 Description The Pizazz Pizzeria prides itself in delivering pizzas to its customers as fast as possible. Unfortunately, due to cutbacks, they can ...
  • 一.矩陣乘法 設矩陣A,B 滿足 :A的列數==B的行數 矩陣乘法的運算規則: 將A矩陣的每一行乘以B矩陣的每一列 * == == 二.斐波那契數列的矩陣推導 首先我們想 Fib[i]=Fib[i-1]+Fib[i-2]; 所以斐波那契數列的第i項之與兩個數也就是Fib[i-1]+Fib[i-2]有 ...
  • 1 thinkphp 框架 中判斷輸入的數值和資料庫中的數值是否一致 首先 需要在view文件夾下建一個模板 名為zhuce.html 我在控制器TextController.class.php中寫了一個方法zhuce(),顯示模板 這裡需要用到ajax來寫的,首選需要引入jquery包 已經在上面 ...
  • 一、認識CSS樣式 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>認識CSS樣式</title> 6 <style ...
一周排行
  • 比如要拆分“呵呵呵90909086676喝喝999”,下麵當type=0返回的是中文字元串“呵呵呵,喝喝”,type=1返回的是數字字元串“90909086676,999”, private string GetStrings(string str,int type=0) { IList<strin ...
  • Swagger一個優秀的Api介面文檔生成工具。Swagger可以可以動態生成Api介面文檔,有效的降低前後端人員關於Api介面的溝通成本,促進項目高效開發。 1、使用NuGet安裝最新的包:Swashbuckle.AspNetCore。 2、編輯項目文件(NetCoreTemplate.Web.c ...
  • 2020 年 7 月 30 日, 由.NET基金會和微軟 將舉辦一個線上和為期一天的活動,包括 微軟 .NET 團隊的演講者以及社區的演講者。本次線上大會 專註.NET框架構建微服務,演講者分享構建和部署雲原生應用程式的最佳實踐、模式、提示和技巧。有關更多信息和隨時瞭解情況:https://focu... ...
  • #abp框架Excel導出——基於vue #1.技術棧 ##1.1 前端採用vue,官方提供 UI套件用的是iview ##1.2 後臺是abp——aspnetboilerplate 即abp v1,https://github.com/aspnetboilerplate/aspnetboilerp ...
  • 前言 本文的文字及圖片來源於網路,僅供學習、交流使用,不具有任何商業用途,版權歸原作者所有,如有問題請及時聯繫我們以作處理。 作者:碧茂大數據 PS:如有需要Python學習資料的小伙伴可以加下方的群去找免費管理員領取 input()輸入 Python提供了 input() 內置函數從標準輸入讀入一 ...
  • 從12年到20年,python以肉眼可見的趨勢超過了java,成為了當今It界人人皆知的編程語言。 python為什麼這麼火? 網路編程語言搜索指數 適合初學者 Python具有語法簡單、語句清晰的特點,這就讓初學者在學習階段可以把精力集中在編程對象和思維方法上。 大佬都在用 Google,YouT ...
  • 在社會上存在一種普遍的對培訓機構的學生一種歧視的現象,具體表現在,比如:當你去公司面試的時候,一旦你說了你是培訓機構出來的,那麼基本上你就涼了,那麼你瞞著不說,然後又通過了面試成功入職,但是以後一旦在公司被髮現有培訓經歷,可能會面臨被降薪,甚至被辭退,培訓機構出來的學生,在用人單位眼裡就是能力低下的 ...
  • from typing import List# 這道題看了大佬寫的代碼,經過自己的理解寫出來了。# 從最外圍的四周找有沒有為O的,如果有的話就進入深搜函數,然後深搜遍歷# 判斷上下左右的位置是否為Oclass Solution: def solve(self, board: List[List[s ...
  • import requests; import re; import os; # 1.請求網頁 header = { "user-agent":'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, li ...
  • import requests; import re; import os; import parsel; 1.請求網頁 header = { "user-agent":'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537. ...