设计网页时,如何为 retina 屏幕优化?

如何准备图片,如何写前端脚本?
关注者
73
被浏览
4,441

2 个回答

图片方面:

(1)图片


左为原始图片,右为Retina优化图片。Retina图片的像素横向和纵向上皆是原图的2倍,也就是最终大小为原图的4倍,命名规则:原图-“image.png” ,Retina图片-“image@2x.png”。因为使用了Retina.js,在Retina设备浏览网页时,它会自动搜索图片当前目录下是否存在命名为“image@2x.png”的图片并替换原图。(Github)如下:

github.com/imulus/retin

(2)Favicon

这里直接用了同事给的方案:
<!-- Favicon -->
<link rel="apple-touch-icon-precomposed" sizes="144x144"
href="img/favicon/wesitelogo144.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/favicon/wesitelogo114.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/favicon/wesitelogo72.png">
<link rel="apple-touch-icon-precomposed" href="img/favicon/wesitelogo57.png">
<link rel="icon" type="image/png" href="img/favicon.png" />

事后查了Apple官网内容如下:

To specify multiple icons for different device resolutions—for example, support both iPhone and iPad devices—add a sizes attribute to each link element as follows:
<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone-retina.png" />
<link rel="apple-touch-icon" sizes="144x144" href="touch-icon-ipad-retina.png" />

Safari Web Content Guide: Configuring Web Applications
Retina.js | Retina graphics for your website (这个就不用多说了,只要关注retina的web设计师基本都知道的retina脚本)
A Wonderful Way To Test Your Websites for Retina by Google Chrome without an Actual Retina Display (关于在没有retina设备时可以使用此方法测试效果,出自自己的英文博客文章)