8

以下のコードに示すように、画像を表示する Web ビューがあります。このバンドルには、iPhone4 で使用するための 128x128 の寸法の DGT64@2x.png も含まれています。DGT64@2x.png は表示されません。iPhone か iPhone4 かによって表示する方法はありますか？

<img src="DGT64.png" width="64" height="64" align="left" style="padding:2px;"/>
4

3 に答える 3

14

それを行う方法は、CSS の背景を使用することです。2x のものをすべて CSS のサブセクションに埋め込むだけです。-webkit-background-size を設定することも重要です。これは、画像として機能する ID Ampersand を持つ div の css の一部 (Retina と非 Retina の両方) の例です。

div#Ampersand {
  background: url('AmpersandBurned.png');
  width:43px;
  height:97px;
  float:left;
  -webkit-background-size: 43px 97px;
}

@media screen and (-webkit-device-pixel-ratio: 2) {
  div#Ampersand {
    background: url('AmpersandBurned@2x.png');
    width:43px;
    height:97px;
    float:left;
  }
}
于 2010-09-09T10:45:23.437 に答える
5

@2xこのトリックは Web コンテンツでは機能しないと思います。とても便利そうに思えますが、Apple にバグを報告して、それを要求することは間違いありません。

アプリから上記の HTML を生成している場合、Retina ディスプレイ デバイスで実行しているかどうかを検出し、画像名を手動で調整するのが最善の方法だと思います。

次のようにして、Retina ディスプレイを検出できます。

if ([[UIScreen mainScreen] respondsToSelector:@selector(scale)]) {
    if ([[UIScreen mainScreen] scale] == 2) {
        // Use high resolution images
    }
}

（ここSOで見つけた回答からそのコードを取得しました）

于 2010-09-06T17:15:13.060 に答える
2

現在、これを行う最善の方法は、background-imageプロパティを使用して CSS ファイルで画像を参照することです。次に、高解像度の画面を持つデバイスによってのみ読み込まれる特別な CSS ファイルを使用して、これらのプロパティをオーバーライドできます。

詳細については、このブログ投稿を参照してください。

于 2010-09-06T18:20:40.797 に答える