视网膜iPhone不能与响应式Twitter Bootstrap

我正在使用Twitter Bootstrap和设计为在UIWebView中运行的网页的响应式CSS。视网膜iPhone不能与响应式Twitter Bootstrap

我希望页面在所有iPhone上看起来都是一样的，除了应该在视网膜iPhone的分辨率上加倍的图像之外，但是占用相同的“房地产”。

我已经成功添加了以下到我的style.css换入或换出正确的图像：

<!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>

当两个图像：

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

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

我在下列情况下使用这些分别是150px宽和300px宽。

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

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

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

来源

2012-08-04 Edwardr

我有一个类似的问题，我希望iPhone浏览器以比默认320px更高的分辨率呈现portait视口。在OP似乎会问这样一个问题：

我想我必须告诉引导响应治疗视网膜部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即可。请注意，这将影响所有类似手机的设备，而不仅仅是视网膜手机，因此您需要使用多个设备进行测试。

我用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-26 06:39:48 nickdos

视网膜iPhone不能与响应式Twitter Bootstrap

回答

相关问题