有没人聊一下Retina 下 网页如何制作?

[tension]

目前找到个办法

就是把所有的图片放大一倍
以前100x100 现在200x200 然后利用 background-size: 100px 100px; 来缩放

但是图片大一倍,也就意味着 存储空间大了一倍,当然占的流量也多了,

还有一个就是 LOGO神马的 用AI制作,然后 不变大小,输出SVG格式

比如 http://www.elinkhost.com/logo.svg

这样的 跟普通图片一样调用即可!

[Livid]

Logo 的这个思路不错，感谢分享。

[Sivan]

先用 media query 判断是否为视网膜屏幕，然后给元素设置等比高清的背景图片以及 background-size 设置到 cover 或 contain 就可以了。

基本就是设计师像 iOS 程序那样出一套 @2x 素材，然后再在原 css 末尾添加上 media query 代码就 OK~

[tension]

@Sivan media query 只能用webkit... Firefox 怎么办!!!!

[Sivan]

<img /> 兼容视网膜途径比较多，基本都需要借助 js 而且代码会变的有点累赘，也有通过 CSS 替换的。

总体来说，网站自身的部分兼容视网膜倒还不是太麻烦。用户上传图片、文章图片等就蛋疼了。

[Sivan]

@tension 都支持的啊，ie 也支持（低版本用 js）。

[tension]

@Livid 用AI储存为 SVG 设置如下,我设置了好多次,才输出对的

[heymi]

怎么说呢，SVG输出的效果不是很好，差很多。

[tension]

SVG:

PNG 缩小

[tension]

图片放大 会发现 SVG的边缘 还是有锯齿的...

而PNG缩小到1倍效果后 明显没有

[tension]

看来V2EX 前端还是不够多!

[keakon]

直接设置图片的长宽为原始的一半也行：
http://www.keakon.net/article/94200

可以在加载图片时用JS判断devicePixelRatio，然后找到retina图片的路径（例如加上@2x），在图片下载完成后缩小长宽并替换低分辨率图片。

[tension]

@keakon 你那个 适合 <img src=**** alt="" />

不适合 CSS啊!

[Mak]

http://www.aoao.org.cn/blog/2012/04/retina-display-image-2x/
看看这篇

[Los]

@tension 一个更残酷的情况，Retina版本在存储空间跟流量消耗上应该是非Retina版本的4倍而不是1倍，图片长和宽都增加为原来的2倍，图像面积就是原来的4倍，所以大小应该是之前的4倍的（图片压缩算法没研究过，不知道大图跟小图的压缩率差别大不大，但大小图存储空间比应该接近4倍左右）。

[tension]

@Mak 嗷嗷写的..不错..
他也说了 还是图片x2是最好的方案!

[keakon]

@tension 最重要的一点是css没有js灵活。你不可能为每张图片（含未来新增的）写一个css规则，但是一个js就能处理所有图片。

[tension]

@keakon 是的...

所以我现在的方案是直接把所有图片放大一倍,然后缩小

[yundanfengqing]

弱弱的说一句 尺寸不变 提高分辨率行不行的？

[ghbjy1128]

用户基数太低，无视之。

[rongbin]

@tension 请问，你的系统所使用的字体有变更过吗？ 这也太清晰了吧。 同样10.8，我的不是retina，用的13 pro 101，你的看起来太舒服了。

[tension]

@rongbin 没有哦...
@yundanfengqing 我试过调整DPI 貌似没用...

[Los]

刚看到的消息
Safari与Chrome浏览器开始支持高分辨率的CSS代码
http://cnbeta.com/articles/201973.htm

[tension]

@Los 这个到是不错!

[SamZeng]

http://coding.smashingmagazine.com/2012/08/20/towards-retina-web/

[hzlzh]

个人觉得 @2x 是最好的方案，理想情况下调用两个不同的script.png即可。相比没有做retina优化之前，只多了一条http请求和一段css media

[Thruth]

1. SVG 方案不具有部署上的可扩展性质：
a)提供方位图转换生成SVG后缩放各种失真 b)SVG 各种profile支持各个版本浏览器实现不一 c)客户端SVG作图有性能需求，即便有硬件加速，在 SVG 密集的情况下低能设备依然会出现响应延迟等现象（如低端 Android 手机）。
2. media query 已经被收入 w3c CSS 标准，webkit 事实实现。考虑到大多 Retina 硬件都有 webkit 内核浏览器，Fx/IE 等他们跟上就好。media query + 2x 是推荐实践。

[X_Del]

@tension SVG 为毛会有锯齿？不是矢量吗（非 Retina 屏亲测无锯齿）？

[qdvictory]

retina都是万恶的苹果搞的，so，我喜欢苹果的官方文档，也比较喜欢他们的方法。。。
http://developer.apple.com/library/safari/#documentation/NetworkingInternet/Conceptual/SafariImageDeliveryBestPractices/ServingImagestoRetinaDisplays/ServingImagestoRetinaDisplays.html#//apple_ref/doc/uid/TP40012449-CH3-SW1

[bhuztez]

@Thruth media query虽然是标准，但那个device-pixel-ratio是苹果独家的吧

[Thruth]

@bhuztez -webkit-device-pixel-ratio 是 webkit 搞出来的私有属性，应该是 5/6 年前就有了。CSSWG 貌似对这个属性不感冒，而在 CSS media query 中用 resolution 解决这个问题。所以对于非 webkit 浏览器来说，device-pixel-ratio 的支持都是可选的（有的支持有的没有，毕竟不是标准规定）。此时可用 96 dpi x ratio 得到 resolution 取值。

比如 "-webkit-min-device-pixel-ratio: 1.5;" 在其他浏览器就是"min-resolution: 144 dpi;"。为了取消 resolution 计算，CSSWG 定义了 dppx 这个单位，所以将来可以直接写成："min-resolution: 1.5dppx"。

[tension]

@qdvictory header {

background: -webkit-image-set( url(images/header.jpg) 1x,

url(images/header_2x.jpg) 2x);

height: 150px; /* height in CSS pixels */

width: 800px; /* width in CSS pixels */

}

这个很喜欢!!!

[Kai]

今天更新网站 (http://chnlaws.com) 试了试楼上同学们提出的方法。最后还是用了 @SamZeng 给出的 Smashing Magazine 那篇文章里面的：

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
.block_to_2x {
background-image: url(block_image_2x.png);
}
}

另外发现，Icon Composer 做出来的 favicon 没法正确识别？最后还是拿一张 32x32 的 favicon.png 代替了 :(

[Thruth]

FYI. 今天W3C刚发布了Responsive Image Extension 标准草案
http://dvcs.w3.org/hg/html-proposals/raw-file/tip/responsive-images/responsive-images.html

当然这是来自HTMLWG的，于是你懂得。。。

[smallcolor]

我要挖个坟。
@Livid 既然 V2EX Logo 已经是高清版本了，为什么不把搜索框也处理一下呢？
http://d.pr/i/xGjn