在iPhone 4上为视网膜显示屏优化网页图片

移动开发 iOS
说起iPhone 4带来的革新,retina display绝对是最吸引眼球的一项.正是依赖这视网膜显示屏,iPhone 4的分辨率达到了640×960 pixels;不过为了保持向下兼容性,它采用的仍然是320×480 points。本文将讲述在iPhone 4上为视网膜显示屏优化网页图片。

说起iPhone 4带来的革新,retina display绝对是最吸引眼球的一项,以至于我现在看电脑的显示屏时,都能看到满屏幕的像素点了⋯

正是依赖这视网膜显示屏,iPhone 4的分辨率达到了640×960 pixels;不过为了保持向下兼容性,它采用的仍然是320×480 points。

也就是说,在不进行缩放的情况下,显示普通图片时,它会用4个像素来显示图片中的1个像素;而在显示retina图片时,每个像素都对应图片中的1个像素。

如此一来,老的应用无需修改就可以在iPhone 4上运行了——虽然显示效果差了点,但是不会出现只有左上角那1/4的区域有内容的情况。

在用iOS SDK开发iOS应用时,只要将图片名加上“@2x”后缀,就能让支持retina display的设备自动显示这个解析度更高的图片。

但Safari等使用UIWebView的应用在展示图片时,却无法利用这个特性,因为这样可能会造成大量没必要的HTTP请求。

既然不能自动实现,那就只能手动来弄了。原理很简单,准备2种图片,当检测到支持retina display时,就显示大图,然后把图像的长宽各缩小一半即可。

在网页中,pixel与point比值称为device-pixel-ratio,普通设备都是1,iPhone 4是2,有些Android机型是1.5。

要检测它,直接用CSS3 media query即可:

  1. <link rel="stylesheet" type="text/css" 
  2. href="/css/retina.css" media="only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)"/> 

或者:

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

这种方式的缺点是图片必须设为背景图片,或者同时列出2个img元素,但隐藏其中一个。详细的代码我就不列出来了.

更灵活的方法当然就是用JavaScript了。只要简单地获取window.devicePixelRatio即可,对老的浏览器而言它是undefined,将其当成1就行了。

以这个地球仪来举例:

  1. <img src="https://s8.51cto.com/oss/202207/20/a83fd0833ad646c8d1d51276980f0df68a8e80.png" id="photo"/> 

它的长宽都是64像素,所以我应该获取一个128像素的,然后缩小一半:

  1. if (window.devicePixelRatio == 2) { 
  2.     var photo = document.getElementById('photo'); 
  3.     photo.src = 'https://s4.51cto.com/oss/202207/20/b374538198f98e05c6c6234dafe26eee066eaf.png'
  4.     photophoto.width = photo.height = 64; // 这个图片没有指定宽高,因此其实修改其中一个就行了 

这种方法的缺点就是可能会浪费流量,因为在JavaScript执行之前,就已经在获取低解析度的图片了。

最终的效果如下:

虽然在电脑上完全看不出有什么区别,但用iPhone 4在手机页面浏览或放大时可以很容易看出2者的差异。

责任编辑:佚名 来源: keakon的涂鸦馆
相关推荐

2012-06-14 10:57:59

Chrome视网膜显示屏

2018-09-26 16:17:49

2012-08-02 13:22:04

Chrome 21浏览器

2012-05-17 09:07:45

iPhone苹果

2013-04-07 15:59:01

苹果

2018-09-07 14:35:28

Macbook Air视网膜屏苹果

2012-03-18 18:46:17

New iPad

2012-07-30 15:24:25

笔记本

2012-06-20 09:38:52

苹果iPhone

2022-12-30 08:00:00

深度学习集成模型

2012-06-27 14:19:33

2012-03-11 15:17:52

iPad

2023-11-21 14:01:29

AI人工智能

2012-04-20 12:57:21

iOS

2022-08-12 19:07:58

电源管理子系统鸿蒙

2012-07-30 09:36:13

智能电视苹果Apple TV

2012-10-25 15:20:39

苹果 MacBook

2018-03-29 14:32:11

显示屏印刷OLED

2012-02-13 10:28:25

iPad 3Retina
点赞
收藏

51CTO技术栈公众号