移动Web―CSS为Retina屏幕替换更高质量的图片

特别声明：此篇文章根据Stéphanie Walter 的英文文章《The Mobile Web: CSS Image Replacement for Retina Display Devices 》进行翻译，整个译文带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。

有很多设备的“devicePixelRatio”都大于1.5或者等于2（window.devicePixelRatio = 物理像素/dips）。我的三星项目就是个最新的iPhone和iPad版本设置了“devicePixeRatio”等于“2”。Retian似乎是屏幕显示的一种趋势，这也是Web设计师面对的一个新挑战。

移动应用程序的设计师们已经学会了如何为Retina屏幕设备显示更好质量的图片，用来提高用户的体验。他们为普通显屏和Retina屏幕提供两套图片，以及为Android设备创建了四套不同尺寸大小的图片。

iPhone5和New iPad已经开始采用了Retina屏幕显示技术。在本文中，你将看到如何使用CSS3技巧在Web应用中为Retina屏幕替换更高质量的图片。

这一切都始于为iPhone创建一个jQuery Mobile的应用程序。当时的想法是想使用一个完整的“HTML5 jQuery Mobile”应用程序，并使用“Phonegap”将其嵌入到“Native Shell”中。

对于这个应用程序，我在在底部创建了一个标签栏，在顶部放置了一个logo，以及模仿了一个ios的标签栏。"header"和“footer”部分都采用了图片替换文本的技术，在顶部显示了logo图标，在底部显示了对应的工具标签icon。

故事就这样发生了，当我在iPhone 4s的设备上进行测试时，我看见顶部的logo和底部的icon图标都被放大，并且看起来模糊，视觉效果非常的差。

为了更好说明问题，我在本机上创建了一个类似于iOS的应用程序，这样你就能搞清楚是怎么一回事。不管你有没有Retina设备，如果你要测试都可以用你的手机点击,同进你也可以点击下载源码。(如果你想模仿做一个简单的手机移动页面，这也是一个例子哟)。

正如我所说的，如果你在一个非视网膜装置上加载页面，看起来是一个不错的效果，但是你在一个Retina装置上加载页面，那么页面上的图片将会栅格化，看起来比较模糊。

由于像素比例（devicePixeRatio）是2，这个时候图片也将放大两倍，此时就造成了图片在设置中显示时被拉伸，呈现出来的时候就模糊不清。下面从iPad3中，iPhone4和”三星“设备中截取的一些被栅格化的图像截图。

三星（Galaxy Nexus）下的效果

iPhone4下的效果

iPad 3下的效果

在这个案例中，为Retina替换图片，采用不同的技巧将会有不同的效果。

我们需要替换的第一张图片是顶部的logo。在此处确保只设置高度不设置宽度。

HTML 结构

发表评论 共有条评论 用户名: 密码: 验证码: 匿名发表