0

webview に html と javascript をロードするハイブリッド iPad アプリがあります。

すべての画像は、iPad 1 および 2s では問題ありませんが、iPad 3 ではぼやけています。

私はいくつかの可能な解決策について考えていました：

  1. 2 倍の画像を提供し、低解像度の iPad で 50% で表示します。
  2. Retina ディスプレイを検出し、さまざまな画像を提供する

さまざまなデバイスでのさまざまな解像度と画像の読み込みをどのように管理しますか?

4

2 に答える 2

1

iPad3 /NewiPad用に画像をあまりアップスケールしないでください。Safariは、高解像度の画像をダウンスケールし ますhttp://www.tomshardware.com/reviews/ipad-3-benchmark-review,3156-5.html。iPad3のフル解像度でWeb画像を表示する唯一の方法は、それらを保存してSafariの外部で表示することです。

編集：

新しいRetinaディスプレイMacBookでは、このコメントは適用されなくなる可能性があります。Webグラフィックの高解像度バージョンを持つことは、おそらく今後ますます重要になるでしょう。

于 2012-05-25T12:25:15.963 に答える
1

Javascript を使用して、HiRes デバイスで LowRes 画像を HiRes 画像に交換できます。それを行うJQuery プラグインがあります。Apple はこのメソッド (JQuery プラグインではなく) を独自のページに使用しているため、それほど悪くはありません。

<img>インラインを CSS 背景画像に変更できる場合は、別の方法を使用できます。次に、メディア クエリを使用して、HiRes 画像を HiRes デバイスに提供できます。

#yourImageConteainer {
   background-image: url('image.png');
}    

@media all and (-webkit-min-device-pixel-ratio : 1.5) {
    #yourImageContainer {
        background-image: url('image@2x.png');
        background-size: 100px 100px;
    }
}

HiRes イメージには iOS@2xサフィックスを付けた名前を付けましたが、これは必須ではありません。

フル解像度の画像を LowRes デバイスに提供しないと、画像のサイズが大きくなり、LowRes デバイスの読み込み時間が長くなり、何のメリットもありません。

サーバー側でHiResデバイスを検出し、要求元のデバイスに最適な解像度の画像を提供できる場合、それが最善の方法です.

于 2012-05-24T06:25:00.460 に答える