視網膜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

回答

相關問題