3

UIWebView で実行するように設計された Web ページのレスポンシブ CSS で Twitter Bootstrap を使用しています。

Retina iPhoneの解像度を2倍にする必要があるが、同じ「不動産」を占める画像を除いて、すべてのiPhoneでページを同じように見せたい.

次のコードを style.css に正常に追加して、適切な画像をスワップ インおよびスワップ アウトしました。

.normalres { display:block } /* or anything else */
.retinares   { display:none  }

@media all and (-webkit-min-device-pixel-ratio: 2) {
   .normalres { display:none  }
   .retinares   { display:block }
}

これらを次のコンテキストで使用します。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title></title>
    <meta name="description" content"">
    <meta name="author" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href="css/bootstrap-responsive-mod.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="span12">
          <h5>Why this phone app?</h5> 
          <img class="pull-right normalres" src="img/iphone.png">          
          <img class="pull-right retinares" src="img/iphone_retina.png">
          <p>Blah Foo Bar</p>
        </div>
      </div>
    </div> <!-- /container -->
  </body>
</html>

2 つの画像の幅はそれぞれ 150px と 300px です。

ただし、Retina iPhone で問題が発生しています。正しい画像が読み込まれますが、非 Retina の iPhone でうまくいく右に引っ張られる (およびその周りにテキストが流れる) のではなく、画像はブラウザーの幅いっぱいに引き伸ばされ、その周りには何も流れません。したがって、非 Retina バージョンとは異なって見えます。

これは、Retina iPhone が通常の iPhone のように低解像度 (320x480) であると Bootstrap が考え、かなり大きな Retina 画像 (幅 320px) を見て、レイアウトが間違っていることに関係していると思います。

Retina iPhoneを320px幅のデバイスではなく640px幅のデバイスのように扱うようにBootstrapレスポンシブに指示する必要があると思いますが、responsive.cssのどのメディアクエリを変更するか、およびそれらを変更する方法がわかりません。

4

1 に答える 1

1

同様の問題があり、iPhone ブラウザでポートレート ビューポートをデフォルトの 320 ピクセルよりも高い解像度でレンダリングする必要がありました。OPはこの質問をしているようです：

Retina iPhoneを320px幅のデバイスではなく640px幅のデバイスのように扱うようにBootstrapレスポンシブに指示する必要があると思いますが、responsive.cssのどのメディアクエリを変更するか、およびそれらを変更する方法がわかりません。

私が使用した修正は、viewportmetaタグを変更することでした。

<meta name="viewport" content="width=device-width, initial-scale=0.8, maximum-scale=1">

約400pxの幅でレンダリングできました。640px を達成するには、単純にinitial-scale値を 0.5 にします。これは、Retina iPhone だけでなく、すべてのモバイルのようなデバイスに影響するため、複数のデバイスでテストする必要があることに注意してください。

私はいくつかのJavaScriptを使用して、iPhoneウィンドウの幅が何であるかを確認しました：

$("#screenWidth").text($(window).width());
$(window).resize(function() {
    $("#screenWidth").text($(window).width());
});

ページにいくつかの HTML を追加します。

<div>screen width: <span id="screenWidth"></span>px</div>
于 2013-06-26T06:39:48.513 に答える