MT - Mutian.info

感谢 Apple，带来了 Retina 屏幕的革命，让我们可以在电子显示屏上享受到印刷级的分辨率。由于分辨率的提升，网页中的文字、Flash 和 SVG 内容显示得比原来更加精细，但网页中的图片却变得异常模糊，存在非常严重的分辨率兼容问题。自从 2010年6月，iPhone4 的上市开始，网页图片的显示兼容问题就已出现，经过几年的发展，配备 Retina 屏幕的电子产品越来越多，如今 Apple 又将 Retina 技术应用到了 Macbook Pro 上，网页图片在 Retina 屏幕下的显示兼容已经变得迫在眉睫。

这里分享几种兼容方法，供大家参考。

1. <img> 标签引用的图片

我们以一张 300*200px 的照片为例：

1

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

如果想让这张图片在 Retina 屏幕下达到应有的显示分辨率，只需使用该照片的源文件导出一张清晰的 600*400px 的图片，我们将其命名为 photo@2x.jpg，替换现有的图片即可：

1

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

换成 @2X 图片，在 Retina 屏幕下的显示就清晰多了，可谓细节毕现。不过在普通屏幕下，图片的显示需要经过浏览器的压缩，一些老版本浏览器如 IE6、7 会显示得非常失真，同时大尺寸的图片会占用更多的带宽，增加页面加载的时间，降低用户体验。通过 JS 的辅助，可以让图片在普通屏幕和 Retina 屏幕下做到自动适配：

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 版本，以决定是否替换。
Read more about "Retina 屏幕下，网页图片的显示兼容" …