0

Retina ディスプレイに問題があります。非 Retina ディスプレイで正常に動作するアプリを入手しました。

リストの CSS で、 a の高さを に設定しましlistitemた20px。

Retina ディスプレイでアプリを試すと、すべての項目が2 倍のサイズで表示されます。iPhone 4 の解像度 (window.innerHeightたとえば) は480x320、実際の解像度が960x640.

今私の質問は、Retina ディスプレイ用に別の css が必要ですか、それともすべてをスケーリングできますか?

4

1 に答える 1

3

Web アプリとして使用する必要があります。

-webkit-min-device-pixel-ratio:2

これは、Retina ディスプレイであるかどうかを知ることができる CSS メディア クエリであるためです。

画像の小さな例として、次のものがあると仮定します。

<body class="bkground"> ... </body>

通常、次のようなものがあります。

.bkground {
  background-image: url(my-awesome-bkg.png);
  -webkit-background-size: 32px 16px;
}

Retina ディスプレイにロードするには、以下を追加する必要があります。

@media all and (-webkit-min-device-pixel-ratio:2) {
  .bkground {
    background-image: url(my-awesome-bkg-hd.png);
  }
}

または、次を使用してすべての画像を外部 css に読み込みます。

<link rel="stylesheet" 
      href="retina.css" 
      media="all and (-webkit-min-device-pixel-ratio:2)" />

これを自動的に行う外部サービスがあります。Sencha.ioのために Sencha フェローが提供する素晴らしいサービスをご覧ください。

Sencha.io ガイド ドキュメントのリンクが更新されました

http://docs.sencha.io/0.3.2/index.html#!/guide

于 2012-05-04T13:32:16.233 に答える