3

我正在将 Twitter Bootstrap 与响应式 CSS 一起用于设计为在 UIWebView 中运行的网页。

我希望页面在所有 iPhone 上看起来都一样，但视网膜 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>

这两个图像分别是 150px 宽和 300px 宽。

但是我遇到了视网膜 iPhone 的问题。加载了正确的图像，而不是将其拉到右侧（以及围绕它流动的文本），这在非视网膜 iPhone 上发生得很好，图像被拉伸到浏览器的整个宽度，并且没有任何东西在它周围流动。因此它看起来与非视网膜版本不同。

我相信这与 Bootstrap 认为视网膜 iPhone 像普通 iPhone 一样低分辨率（320x480）然后看到相当大的视网膜图像（320 像素宽）并弄错布局有关。

我想我必须告诉 Bootstrap responsive 将视网膜 iPhone 视为 640px 宽的设备而不是 320px 宽的设备，但我不知道 responsive.css 中哪些媒体查询要更改以及如何更改它们。

4

1 回答 1

1

我有一个类似的问题，我希望 iPhone 浏览器以比默认 320px 更高的分辨率渲染一个肖像视口。OP似乎在问这个问题：

我想我必须告诉 Bootstrap 响应式将视网膜 iPhone 视为 640 像素宽的设备而不是 320 像素宽的设备，但我不知道 responsive.css 中的哪些媒体查询要更改以及如何更改它们。

我使用的修复是修改视口meta标签：

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

然后我能够以大约 400 像素的宽度进行渲染。要达到 640 像素，只需将initial-scale值设为 0.5。请注意，这将影响所有类似移动设备的设备，而不仅仅是视网膜 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 回答