ios - CSSを使用したiOSでの高解像度スプライトの適切な使用は何ですか?

Question

ナビゲーション スプライトの高解像度 (2x) バージョンを使用して、スプライトを iPhone4+ に正しく表示しようとすると、深刻な問題が発生します。これが私が今使っているコードです。

.pixelj a, .games a, .team a, .forums a {
    width: 156px;
    height: 35px;
    background-image: url('/assets/blogtext2x.png');
    background-repeat: no-repeat;
/*  background-size: 156px 17px;*/  
    text-indent: -9999px;
    overflow: hidden;
    display: block;
    float: left;
    }

ご覧のとおり、これはナビゲーション用で、すべてのナビゲーション ワード要素が 1 つのスプライト画像に含まれています。「background-size」を使用してみましたが、スプライト全体が指定された幅/高さに押しつぶされました。それを取り除くと、2倍の画像が表示されますが、50％にならないため、正しく表示されます。

ここで何が間違っていますか？高解像度デバイスをターゲットにするために使用している @media クエリを次に示します。

@media (min--moz-device-pixel-ratio: 1.5),
  (-o-min-device-pixel-ratio: 3/2),
  (-webkit-min-device-pixel-ratio: 1.5),
  (min-device-pixel-ratio: 1.5),
  (min-resolution: 1.5dppx),
  (max-device-width: 640px) {