【轉】Retina 屏幕下，網頁圖片的顯示兼容

時間  2019-11-08
標籤 retina 屏幕 網頁 圖片 顯示 兼容 欄目 HTML 简体版
原文   原文鏈接

感謝 Apple，帶來了 Retina 屏幕的革命，讓咱們能夠在電子顯示屏上享受到印刷級的分辨率。因爲分辨率的提高，網頁中的文字、Flash 和 SVG 內容顯示得比原來更加精細，但網頁中的圖片卻變得異常模糊，存在很是嚴重的分辨率兼容問題。自從 2010年6月，iPhone4 的上市開始，網頁圖片的顯示兼容問題就已出現，通過幾年的發展，配備 Retina 屏幕的電子產品愈來愈多，現在 Apple 又將 Retina 技術應用到了 Macbook Pro 上，網頁圖片在 Retina 屏幕下的顯示兼容已經變得迫在眉睫。javascript

這裏分享幾種兼容方法，供你們參考。css

1. <img> 標籤引用的圖片

咱們以一張 300*200px 的照片爲例：html

1

<img src="./photo.jpg" style="width:300px;height:200px;" />

若是想讓這張圖片在 Retina 屏幕下達到應有的顯示分辨率，只需使用該照片的源文件導出一張清晰的 600*400px 的圖片，咱們將其命名爲 photo@2x.jpg，替換現有的圖片便可：java

1

<img src="./photo@2x.jpg" style="width:300px;height:200px;" />

換成 @2X 圖片，在 Retina 屏幕下的顯示就清晰多了，可謂細節畢現。不過在普通屏幕下，圖片的顯示須要通過瀏覽器的壓縮，一些老版本瀏覽器如 IE六、7 會顯示得很是失真，同時大尺寸的圖片會佔用更多的帶寬，增長頁面加載的時間，下降用戶體驗。經過 JS 的輔助，可讓圖片在普通屏幕和 Retina 屏幕下作到自動適配：jquery

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<img class="photo" src="./photo.jpg" style="width:300px;height:200px;" />
 
<script type="text/javascript">
$(document).ready(function () {
	if (window.devicePixelRatio > 1) {
		var images = $("img.photo");
		images.each(function(i) {
			var x1 = $(this).attr('src');
			var x2 = x1.replace(/(.*)(\.\w+)/, "$1@2x$2");
			$(this).attr('src', x2);
		});
	}
});
</script>

Retina.js 提供了更加完善的解決方案，自動匹配屏幕分辨率的同時，還能夠檢測服務器上是否存有當前圖片的 @2X 版本，以決定是否替換。
web

優勢：算法

  1. 操做簡單
  2. 普通屏幕下不會加載 @2X 的大尺寸圖片，節約帶寬

缺點：shell

  1. Retina 屏幕下，標準圖片和 @2X 圖片都會被加載
  2. 圖片在顯示過程當中會被重繪
  3. 有些老版本瀏覽器下存在兼容問題

2. CSS 背景圖片

2.1 Meta Queries + background-size

咱們以一張 logo 的背景圖爲例，首先咱們定義 logo 的尺寸爲 100*40px，而後爲 #logo 設定一個 100*40px 的背景圖片 logo.png，瀏覽器

1
2
3
4
5

#logo {
	width: 100px;
	height: 40px;
	background: url(./logo.png) 0 0 no-repeat;
}

接下來經過 Meta Queries 判斷設備的最小顯示像素比，若是大於等於1.5的話，爲 #logo 設定一張 200*80px 的背景圖片 logo@2x.png，而後經過設置 background-size 讓背景圖顯示爲 logo 該有的尺寸。這裏的顯示像素比咱們選擇 1.5 做爲閾值，是爲兼容除蘋果之外的高分辨率設備，好比三星的 Android Pad。服務器

1
2
3
4
5
6
7
8
9

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min--moz-device-pixel-ratio: 1.5), /* 注意這裏的寫法比較特殊 */
       only screen and (-o-min-device-pixel-ratio: 3/2),
       only screen and (min-device-pixel-ratio: 1.5) {
	#logo {
		background-image: url(./logo@2x.png);
		background-size: 100px auto;
	}
}

這樣，對於普通的顯示設備或是不支持 Meta Queries 的瀏覽器，會顯示標準的背景圖，對於支持 Meta Queries 的 Retina 設備，會顯示 @2X 的背景圖。（ IE六、七、8 均不支持 Meta Queries 和 background-size ）

若是僅是爲了兼容當前的蘋果 Retina 顯示屏，也能夠直接判斷設備的顯示像素比是否等於2：

1
2
3
4
5
6

@media only screen and (-webkit-device-pixel-ratio: 2),
       only screen and (-moz-device-pixel-ratio: 2),
       only screen and (-o-device-pixel-ratio: 2/1),
       only screen and (device-pixel-ratio: 2) {
	...
}

優勢：

  1. 只會加載匹配當前設備的最適圖片
  2. 跨瀏覽器兼容

缺點：

  1. 若是背景圖片不少的話，須要編寫很是冗長的代碼

2.2 image-set

咱們一樣以以前的 logo 爲例，實現方式以下：

1
2
3
4

#logo {
	background: url(./logo.png) 0 0 no-repeat;
	background-image: -webkit-image-set(url(./logo.png) 1x, url(./logo@2x.png) 2x);
}

優勢：

  1. 讓圖片的連接地址在 CSS 中更加集中，代碼的維護成本下降
  2. 可讓瀏覽器獲取多種尺寸的圖片文件，根據屏幕分辨率或是其餘一些因素選擇適當的圖片進行展現，在圖片的匹配上能夠作到更加智能

缺點：

  1. image-set 如今只是 CSS4 的一個草案，目前只有 Webkit 內核的 Safari 6+ 和 Chrome 21+ 支持該屬性

最後的這條缺點很致命，期待 W3C 早日將 image-set 寫入標準之中，讓更多的瀏覽器支持這種寫法。

3. 使用 SVG 可縮放矢量圖形

與只能記錄像素信息的位圖相比，矢量圖在不一樣分辨率下的兼容有着先天的優點，目前大多數現代瀏覽器都已經支持基於 XML 的 SVG 格式圖形的顯示，網頁中一些線條簡單的 Logo 、圖標或特殊字形，若是轉成矢量的 SVG 格式來顯示，在 Retina 下的兼容也就搞定了。

製做 SVG 格式圖片，可使用 Adobe Illustrator 或免費的替代軟件 inkscape 。

使用 SVG 格式圖片，能夠像咱們使用其餘格式的圖片同樣，用 HTML 的 <img> 標籤引用，或用 CSS 的 background-image 、 content:url() 屬性，須要注意的是，不管用哪一種形式，最好定義一下圖片的尺寸。

1

<img src="example.svg" width="300" height="200" />
 
1
2
3
4
5
6
7
8
9
10
11
12
13

/* Using background-image */
.image {
	background-image: url(example.svg);
	background-size: 300px 200px;
	width: 300px;
	height: 200px;
}
 
/* Using content:url() */
.image-container:before {
	content: url(example.svg);
	/* width and height do not work with content:url() */
}

若是須要兼容 IE六、七、8 或是其餘一些不支持 SVG 的瀏覽器，須要額外用到 PNG 格式的圖片副本（關於 PNG 格式 Alpha 通道的兼容問題這裏不作討論）。

3.1 <img> 標籤引用 SVG 格式圖片

在 HTML 的 <img> 標籤中，增長一個 PNG 格式圖片的自定義屬性

1

<img src="example.svg" data-png-fallback="example.png" />

而後引入 jQuery 和 Modernizr 判斷當前瀏覽器是否支持 SVG ，不支持的話使用 PNG 替換 SVG 。

1
2
3
4
5
6
7
8

$(document).ready(function(){
	if(!Modernizr.svg) {
		var images = $('img[data-png-fallback]');
		images.each(function(i) {
			$(this).attr('src', $(this).data('png-fallback'));
		});
	}
});

3.2 CSS 背景引用 SVG 格式圖片

引入 Modernizr ，將 CSS 改寫成如下形式便可：

1
2
3
4
5
6
7
8
9
10

.image {
	background-image: url(example.png);
	background-size: 30p0x 200px;
}
 
.svg {
	.image {
		background-image: url(example.svg);
	}
}

爲了得到最佳的跨瀏覽器兼容效果，避免在 Firefox 和 Opera 下出現光柵問題，製做的 SVG 圖片最小要達到父容器的尺寸。

優勢：

  1. 可兼容全部設備的分辨率
  2. 維護成本較低
  3. 矢量圖能夠無限伸縮，更加面向將來

缺點：

  1. 不適合複雜的圖形，複雜的矢量圖形可能會致使文件過大
  2. 不一樣的抗鋸齒算法，可能會帶來不一樣的瀏覽感覺
  3. IE六、七、8，早期的 Android 瀏覽器，及其餘一些較老的瀏覽器沒法提供對 SVG 的原生支持，使用 <img> 標籤的方式可能會致使瀏覽器下載 SVG 文件

4. Favicon

Favicon 的 Retina 兼容比較容易，或許你的如今 Favicon 在 Retina 下就已經顯示得很是清晰，若是不是這樣，使用 ico 編輯工具，建立一個包含 16*16 和 32*32 兩種內建圖像的 ico 文件，替換現有的 Favicon 便可，瀏覽器會根據分辨率的大小自動匹配內建圖像的尺寸。

至於 ico 編輯工具，Windows 下推薦使用 IconXP ，Mac 下推薦 Apple’s Icon Composer（Graphic Tools in Xcode中）。

~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~

參考：
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程