在iPhone 4上为视网膜显示屏优化网页图片
说起iPhone 4带来的革新，retina display绝对是最吸引眼球的一项，以至于我现在看电脑的显示屏时，都能看到满屏幕的像素点了⋯正是依赖这视网膜显示屏，iPhone 4的分辨率达到了640×960 pixels;不过为了保持向下兼容性，它采用的仍然是320×480points。
也就是说，在不进行缩放的情况下，显示普通图片时，它会用4个像素来显示图片中的1个像素;而在显示retina图片时，每个像素都对应图片中的1个像素。
如此一来，老的应用无需修改就可以在iPhone 4上运行了——虽然显示效果差了点，但是不会出现只有左上角那1/4的区域有内容的情况。
在用iOS SDK开发iOS应用时，只要将图片名加上“@2x”后缀，就能让支持retina display的设备自动显示这个解析度更高的图片。
但Safari等使用UIWebView的应用在展示图片时，却无法利用这个特性，因为这样可能会造成大量没必要的HTTP请求。
既然不能自动实现，那就只能手动来弄了。原理很简单，准备2种图片，当检测到支持retinadisplay时，就显示大图，然后把图像的长宽各缩小一半即可。
在网页中，pixel与point比值称为device-pixel-ratio，普通设备都是1，iPhone4是2，有些Android机型是1.5。
要检测它，直接用CSS3 media query即可：
[*]<link rel=&quot;stylesheet&quot; type=&quot;text/css&quot;
[*]href=&quot;/css/retina.css&quot; media=&quot;only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)&quot;/>
或者：
[*]@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {}
这种方式的缺点是图片必须设为背景图片，或者同时列出2个img元素，但隐藏其中一个。详细的代码我就不列出来了.
http://images.51cto.com/files/uploadimg/20110718/1325130.png
更灵活的方法当然就是用JavaScript了。只要简单地获取window.devicePixelRatio即可，对老的浏览器而言它是undefined，将其当成1就行了。
以这个地球仪来举例：
[*]<img src=&quot;http://images.51cto.com/files/uploadimg/20110718/1325131.png&quot; id=&quot;photo&quot;/>
它的长宽都是64像素，所以我应该获取一个128像素的，然后缩小一半：
[*]if (window.devicePixelRatio == 2) {
[*] var photo = document.getElementById('photo');
[*] photo.src = 'http://images.51cto.com/files/uploadimg/20110718/1325132.png';
[*] photophoto.width = photo.height = 64; // 这个图片没有指定宽高，因此其实修改其中一个就行了
[*]}
这种方法的缺点就是可能会浪费流量，因为在JavaScript执行之前，就已经在获取低解析度的图片了。
最终的效果如下：
http://images.51cto.com/files/uploadimg/20110718/1325131.png http://images.51cto.com/files/uploadimg/20110718/1325132.png
虽然在电脑上完全看不出有什么区别，但用iPhone 4在手机页面浏览或放大时可以很容易看出2者的差异。
【编辑推荐】
[*]白色iPhone 4运行“未曾见过”的iOS
[*]传苹果将在WWDC发布iPhone 4S而非iPhone 5
[*]WWDC传闻分析：神秘的iPhone 4S以及iOS 5
页:
[1]