如何让网站支持retina屏幕?

2012-09-12 10:50:01 +08:00
 Alpha
http://www.leiphone.com/tag/iphone5
我看到他家的logo在retina屏幕下是高清的,这个是怎么实现的
3579 次点击
所在节点    问与答
3 条回复
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 就要命名为 test@2x.png

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

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

另外我注意到 retina.js 在本地不起作用,要上传到服务器上才有效果。
flyingkid
2012-09-12 11:07:56 +08:00
@chenluois 强!谢谢
Alpha
2012-09-12 11:14:18 +08:00
@chenluois 非常感谢。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/47513

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX