iphone - 针对视网膜显示优化的 Sprite

Question

我正在构建一个响应式网站，因此我一直在阅读有关移动设备和 iPhone 上的 CSS Sprite 的信息。我发现this article ，我认为这是正确的技术，但解释可能会更好。我最终得到了这个:

http://jsfiddle.net/H9FcH/

有人可以告诉我它在 iPhone 上看起来是否正常吗？我不确定那50%。另外，有没有人有更好的文章？

Answer 1

您为启用 Retine 的设备指定的 background-size 属性应包含非 Retina sprite 的大小，即宽度和高度的一半视网膜 Sprite 。它应该是整个 Sprite 的大小，而不仅仅是 Sprite 中单个图标的大小。

更新的 fiddle : http://jsfiddle.net/jhogervorst/qr5fs/2/

屏幕截图(视网膜): /image/sIDnE.png

CSS:

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min--moz-device-pixel-ratio: 1.5),
       only screen and (min-resolution: 240dpi) {
        .action {
            background-image: url(http://dl.dropbox.com/u/13823768/masonry/img/test-sprite2x.png);
            -moz-background-size: 153px 64px;
            -o-background-size: 153px 64px;
            -webkit-background-size: 153px 64px;
            background-size: 153px 64px;
        }
}