0

次のcssを試しましたが、iPad3では役に立ちません。画像の 4 分の 1 しか iPad3 に収まりません。

.titleIcon {
  float: left;
  background: url(/images/sprite.png);
  background-position: 0px 0px;
  width: 16px;
  height: 16px;
}



@media
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (   min--moz-device-pixel-ratio: 1.5),
only screen and (     -o-min-device-pixel-ratio: 3/2),
only screen and (        min-device-pixel-ratio: 1.5){ 

    .titleIcon{
        float: left;
        background: url(/images/sprite-2x.png) no-repeat 0 0;
        background-position: 0px 0px;                   
    }

}
4

2 に答える 2

0

Retina ディスプレイを搭載したデバイスは、各 CSS ピクセルが実際には 2 つのデバイス ピクセルで構成される仮想ビューポートを使用します。100x100px の div を作成すると、Retina ディスプレイ上では通常のディスプレイと同じサイズに見えますが、Retina ディスプレイ上では実際にはデバイス ピクセルで 200x200px です。

通常、これは良いことですが、超高解像度の画像が通常のディスプレイと同じように Retina ディスプレイ上で大きく見えることを意味します (つまり、大きすぎて収まりません)。全体を表示したい場合は、サイズを半分に縮小する必要があります。

通常のディスプレイでは、これは解像度の低下を意味しますが、Retina ディスプレイには CSS ピクセルごとに 2 つのデバイス ピクセルがあるため、これは相殺され、画像は意図したとおりに正確に表示されます。

于 2013-05-03T08:50:40.370 に答える