|
|
|
|
移动端

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

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

作者:keakon来源:keakon的涂鸦馆|2011-07-18 13:20

说起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://images.51cto.com/files/uploadimg/20110718/1325131.png" id="photo"/> 

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

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

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

最终的效果如下:

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

【编辑推荐】

  1. 白色iPhone 4运行“未曾见过”的iOS
  2. 传苹果将在WWDC发布iPhone 4S而非iPhone 5
  3. WWDC传闻分析:神秘的iPhone 4S以及iOS 5
【责任编辑:立方 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢
24H热文
一周话题
本月最赞

订阅专栏+更多

Redis运维秘籍

Redis运维秘籍

运维标配技术
共15章 | one叶孤舟

57人订阅学习

活学活用 Ubuntu Server

活学活用 Ubuntu Server

实战直通车
共35章 | UbuntuServer

235人订阅学习

Java EE速成指南

Java EE速成指南

掌握Java核心
共30章 | 51CTO王波

89人订阅学习

读 书 +更多

Wicked Cool Java中文版

本书主要介绍由Sun微系统公司创建的Java编程语言。 除了核心内容外,Java还有许多免费的财富,即开放源代码的库。本书就是为了介绍这些库...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊

51CTO服务号

51CTO播客