Ios 切换用于视网膜显示的CSS精灵页面：图像的大小是原来的两倍

我正在为移动设备创建的页面使用CSS精灵页面。我已经得到了我想要的布局，这是我使用的CSS，它在Chrome Canary的iPhone 3GS模拟器上看起来很好：

div#logo {
    background: url('/static/images/iphone/iphone_landing_sprites_small.png') -114px 0px no-repeat;
    display: inline-block;
    width: 90px;
    height: 44px;
    display:block;
    float:right;
    margin:10px;
}

div#stars {
    background: url('/static/images/iphone/iphone_landing_sprites_small.png') -114px -46px no-repeat;
    display: inline-block;
    width: 71px;
    height: 12px;
}

div#iPhone {
    background: url('/static/images/iphone/iphone_landing_sprites_small.png') 0px 0px no-repeat;
    display: inline-block;
    float:left;
    width: 112px;
    height: 238px;
    margin-top: 54px;
}

div#separator {
    background: url('/static/images/iphone/iphone_landing_sprites_small.png') -114px -60px no-repeat;
    display: inline-block;
    width: 1px;
    height: 53px;
}

当然，当在视网膜显示器上观看时，图像显示出轻微的像素化。我按照中的建议，为不同的显示密度切换精灵图纸，并添加了以下内容：

@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: 240dppx) {

    div#logo {
        background-image: url('/static/images/iphone/iphone_landing_sprites.png');
        background-position: -226px 0px;
    }

    div#stars {
        background-image: url('/static/images/iphone/iphone_landing_sprites.png');
        background-position: -226px -91px;
    }

    div#iPhone {
        background-image: url('/static/images/iphone/iphone_landing_sprites.png');
        background-position: 0px 0px;
    }

    div#separator {
        background-image: url('/static/images/iphone/iphone_landing_sprites.png');
        background-position: -226px -117px;
    }
}

所以现在我的页面在iPhone3GS模拟器上仍然显示得很好，因为@media开关对它没有任何作用，但是当从iPhone4模拟器上查看时，图像的大小是原来的两倍。布局保持不变，显示图像的帧大小相同，但图像被裁剪，因此您只能看到每个图像的左上角四分之一

---

在屏幕上保持相同大小的同时，是否需要指定其他属性使图像压缩为双密度像素？

我找到了一个解决方案：不是像这样定义每个元素的新偏移：

background-position: -226px 0px;

我们只需要“假装”图像和以前一样大。因此，我们将“背景大小”属性设置为较小精灵表的大小：

background-size: 204px 238px;

---

…这似乎奏效了

你有没有试过真正的视网膜设备？？？我不知道模拟器是否能够重现视网膜显示如果加载的图像大小是视网膜的两倍，您是否需要指定两倍的宽度/高度尺寸？您可以使用Firefox测试视网膜媒体查询转到关于：config Find layout.css.devPixelsPerPx将其更改为您所需的正常比例1，2用于视网膜等-1似乎是默认值。和刷新。更多信息-@grimmus指定两倍大小会使图像占据页面上两倍的空间，因此它们仍然显示为像素化，但大小是两倍。