uiwebviewおよびiphone4網膜ディスプレイ

StackOverflow https://stackoverflow.com/questions/3724058

  •  03-10-2019
  •  | 
  •  

質問

私は持っています UIWebView いくつかのローカルテキストと画像が表示されます。どこかで間違いを犯したか、 UIWebView 自動的に処理しません @2x 高解像度画像用の接尾辞。

だから、私の質問は他の誰かが正常にロードされたことです @2x aへの画像 UIWebView 通常の手段を通じて、または私は何か特別なことをする必要がありますか？ユーザーがRetinaディスプレイを持っているかどうかを何らかの形で検出できますか？

役に立ちましたか？

解決

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

機能のテスト。 Retina画像または通常の画像を表示する必要があるかどうかを知りたい場合は、デバイスにRetinaディスプレイがあるかどうかをテストします。特定のモデルではないことをテストします（アプリケーションを最善の証明で証明することは、変更する必要があることを意味します。新しいモデルが出てきたときのものが少ない）。これを行うには、次のサンプルコードを使用できます。

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

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

あなたの質問の詳細については、事前に網膜画像の場所と非網膜画像の場所を持たずに、WebViewでそれを行う方法がわかりません。私がその情報を手に入れると、私は（過去に）それを使用して、Webページが私が置き換えることを期待していた既知のセンチネルのテキストを置き換えました。 {{{image_location}}} HTMLデータをダウンロードできる場所、文字列形式に入手してから、そのテキストを置き換える文字列に置き換えます。そうでない場合は通常サイズの画像（上記のコードを使用）。

誰もより良い解決策を持っていないなら、これが役立つことを願っています。

他のヒント

このJavaScriptハックを使用して、Retinaデバイスで実行するときにスケーリングされた画像をロードします。それは変わります src と 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 Seams JavaScriptファイルをコンパイルするのが好きなものとして検出されます。また、現在のスクリプトが物事を壊す可能性があることに注意してください devicePixelRatio たまたま将来的には3歳以上であるため、予防策は変更することかもしれません (scale == undefined || scale == 1) に scale != 2 ロードのみ @2x 今のところ。

アップデート： aもあります jquery-retina-display-plugin それは似たようなことをしますが、あなたが設定する必要があります width 属性と縫い目も使用します HEAD 画像が存在するかどうかを確認するようにリクエストします。ローカルファイルでどのように機能するかはわかりません。

私はこれをいくつかのCSSまたはJavaScriptマジックを使用して適切な画像のみを表示することで達成できると思いました。主なアイデアは、通常と高解像度の2つの写真を挿入し、CSS属性を設定することです 画面 に 無し マスクする写真のために：

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 }

   ...

常にそうしてください：

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

CSSの参照背景画像の場合、webkit-backgroundサイズから半サイズを使用します。

欠点：非Retinaデバイスは、特大の画像をダウンロードします。

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

<img src="hi-res-icon.png" width="10px" height="10px" />

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

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top