Retina iPhone无法使用响应式Twitter引导程序

我正在使用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 responsible，将视网膜iPhone视为640像素宽的设备，而不是320像素宽的装置，但我不知道responsive.css中的哪些媒体查询要更改，以及如何更改它们。

我也遇到过类似的问题，我希望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像素的宽度进行渲染。要实现640px，只需将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>

相关内容

最新更新

热门标签：