缩小视网膜精灵

Question

是否可以有一个带有常规和视网膜尺寸图标的精灵文件？

我正在尝试以下

.facebook { width:24px; height:24px;;background-position: -151px -227px;}

@media
only screen and (min-device-pixel-ratio: 2),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (-moz-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1) {
    .facebook { background-position: -117px -169px;background-size: 24px 24px; }
}

.sprite {
    background-image: url("img/sprite.png?ver=10");
    background-repeat: no-repeat;
    display: inline-block;
    overflow: hidden;
}

HTML

<span class="sprite facebook">
</span>

但是在IOS设备上，如果我打开背景大小，则不会显示图标。如果我删除背景大小，它将显示但不会按比例缩小。

我做错了什么？是因为它们在同一个sprite.png？