如何让网站支持retina屏幕？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

V2EX 提问指南

这是一个创建于 4442 天前的主题，其中的信息可能已经有所发展或是发生改变。

http://www.leiphone.com/tag/iphone5
我看到他家的logo在retina屏幕下是高清的，这个是怎么实现的

Retina

屏幕

logo

3 条回复 • 1970-01-01 08:00:00 +08:00

chenluois

2012-09-12 11:05:04 +08:00

可以用 http://retinajs.com (需翻墙)

在 HTML 页面 body 内底部链接对应版本的 Retina.js
<script src="retina.js"></script>

首先需要准备两个分辨率的图片，其次要在 img 标签里指定 width 和 height，否则不起作用。
假设普通分辨率图片为 128x128 名为 test.png，高清图片 256x256 就要命名为 [email protected]

在 HTML 页面中应这样写
<img src="test.png" width="128" height="128"/>

然后只需要再把 [email protected] 那个高清图放到与 test.png 同一目录下就可以了。

另外我注意到 retina.js 在本地不起作用，要上传到服务器上才有效果。

flyingkid

2012-09-12 11:07:56 +08:00

@chenluois 强！谢谢

Alpha

2012-09-12 11:14:18 +08:00

@chenluois 非常感谢。