14

私はUIWebViewいくつかのローカルテキストと画像を表示するを持っています。どこかで間違えたか、高解像度画像UIWebViewのサフィックスを自動的に処理しません。@2x

だから、私の質問は、他の誰かが通常の方法で@2x画像を正常にロードしたUIWebViewか、それとも何か特別なことをする必要があるかということです。ユーザーがRetinaディスプレイを使用しているかどうかをどうにかして検出できますか？

4

6 に答える 6

15

あなたの要求に従って...

機能をテストします。Retina画像と通常の画像のどちらを表示する必要があるかを知りたい場合は、デバイスにRetinaディスプレイがあるかどうかをテストします。特定のモデルのものではありません（アプリケーションを可能な限り将来にわたって利用できるようにするため、変更する必要があります）。新しいモデルが出たときのものが少なくなります）。これを行うには、次のサンプルコードを使用できます。

if([[UIScreen mainScreen] respondsToSelector:@selector(scale)] &&
   [[UIScreen mainScreen] scale] == 2.0)
{
    /* We have a retina display. */
}
else
{
    /* We do not. */
}

このコードは、私がこれを書いた時点で、すべてのモデルとすべてのファームウェアバージョンで安全です。Appleがこのscale方法を廃止するまでは、将来のバージョンでも安全ですが、これは決して起こらないかもしれません。

あなたの質問の詳細については、網膜画像と非網膜画像の位置を事前に把握していないと、Webビューでそれを行う方法がわかりません。その情報を入手したら、（過去に）それを使用して、Webページで置き換えられると予想される既知のセンチネルテキストを置き換えました。たとえば、HTMLに何かを入れて{{{image_location}}}、HTMLデータをダウンロードできるようにしました。 、文字列形式に変換してから、その文字列を置き換えて、そのテキストを置き換えます。網膜ディスプレイを使用している場合は@ 2x画像のURLで、適切な倍率で、そうでない場合は通常のサイズの画像を使用します（上記のコード）。

誰もより良い解決策を思い付かない場合、これが役立つことを願っています。

于 2010-09-16T07:35:10.437 に答える
5

このJavascriptハックを使用して、網膜デバイスで実行しているときにスケーリングされた画像を読み込みます。対応する拡大縮小された画像を使用するように、すべての画像のsrcand属性を変更します。widthこれはローカルイメージでのみテストしたことに注意してください。

display: none画像ロードシームで設定してからリセットし、ちらつきを修正します。また、このコードはおそらくWebKit以外のブラウザと互換性がないことに注意してください。

document.addEventListener("DOMContentLoaded", function() {
  var scale = window.devicePixelRatio;
  // might want this to be scale != 2
  if (scale == undefined || scale == 1) {
    return;
  }

  var re = /^(.*)(\..*)$/;
  var images = document.getElementsByTagName("img");
  for (var i =  0; i < images.length; i++) {
    var img = images[i];
    var groups = re.exec(img.src);
    if (groups == null) {
      continue;
    }

    img.style.setProperty("display", "none");
    img.addEventListener("load", function(event) {
      event.target.width /= scale;
      event.target.style.setProperty("display", "");
    });
    img.src = groups[1] + "@" + scale + "x" + groups[2];
  }
});

ヒントは、これをegというファイルに追加してからscaledimages.js、

<script type="text/javascript" src="scaledimages.js"></script>

jsファイルがターゲットの「ビルドフェーズ」の「コンパイル済みソース」ではなく「コピーバンドルリソース」にリストされていることを確認してください。デフォルトのXcodeシームは、Javascriptファイルをコンパイルしたいものとして検出します。また、現在のスクリプトがdevicePixelRatio将来3以上になると問題が発生する可能性があることにも注意してください。予防策として、今のところロードのみに変更(scale == undefined || scale == 1)することをお勧めします。scale != 2@2x

更新：同様のことを行うjQuery-Retina-Display-Pluginwidthもありますが、属性とシームを設定してHEAD、画像が存在するかどうかを確認するリクエストも使用する必要があります。ローカルファイルでどのように機能するかはわかりません。

于 2011-10-12T14:13:01.383 に答える
4

これは、CSSまたはJavascriptの魔法を使用して、適切な画像のみを表示することでも実現できると思います。主なアイデアは、通常と高解像度の2つの画像を挿入してから、マスクする画像のCSS属性の表示をnoneに設定することです。

HTMLファイル

<link href="default.css" rel="stylesheet" media="screen" type="text/css" />
<link href="highresolution.css" media="screen and (-webkit-min-device-pixel-ratio:2)" type="text/css" rel="stylesheet" />

..。

<img src="image.png"    width="..."   height="..."    class="normalRes" />    
<img src="image@2x.png" width="..."   height="..."    class="highRes" />

CSSファイル：default.css

.normalRes { display:block } /* or anything else */
.highRes   { display:none  }

CSSファイル：highresolution.css

.normalRes { display:none  }
.highRes   { display:block }  /* or anything else */

私はそれを少しテストしました、そしてそれはうまくいきました。今より多くのテストが必要です。私はここで解決策を見つけました：http ：//www.mobilexweb.com/blog/iphone4-ios4-detection-safari-viewport

更新2012-06-24

これは、 highresolution.cssファイルを必要としない別のソリューションです。default.css
に次のコードを追加します。

@media all and (-webkit-min-device-pixel-ratio: 2) {

   .normalRes { display:none  }
   .highRes   { display:block }

   ...
于 2010-12-29T14:24:34.343 に答える
2

常に行う：

<img src="image@2x.png" width={half-width} />

CSSで参照される背景画像の場合、-webkit-background-sizeを使用してそれらを半分のサイズにします。

短所：網膜以外のデバイスは特大の画像をダウンロードします。

于 2010-10-01T17:38:48.193 に答える
1

最善の解決策は、網膜ベースのWebViewと非網膜ベースのWebViewの両方に高解像度の画像を使用することです。次に、幅と高さの属性を使用して、画像のサイズ（ポイント単位）を設定します。

<img src="hi-res-icon.png" width="10px" height="10px" />
于 2011-07-20T12:21:16.647 に答える
0

検出に関しては、このコードサンプルを使用できます。iPhone4も検出するように更新しました。

于 2010-09-16T06:00:18.183 に答える