CODEWITHSUNDEEP
iphonecssiostwitter-bootstrapresponsive-design
Edwardr
Edwardr

Reputation: 2956

Retina iPhone not working with responsive Twitter Bootstrap

I'm using Twitter Bootstrap with the responsive CSS for a web-page designed to run in a UIWebView.

I want the page to look the same on all iPhone with the exception of images which should be doubled in resolution for the retina iPhones, but take up the same "real estate".

I have successfully added the following to my style.css to swap in and out the right images:

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

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

I use these in the following context:

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

Where the two images are 150px wide and 300px wide respectively.

However I'm experiencing a problem with the retina iPhone. The correct image is loaded but rather than it being pulled to the right (and the text flowing around it), which happens great on the non-retina iPhone, the image is stretched to the full width of the browser and nothing flows around it. Therefore it looks different to the non-retina version.

I believe this is something to do with Bootstrap thinking the retina iPhone is low res (320x480) like the normal iPhone and then seeing the rather large retina image (320px wide) and getting the layout wrong.

I think I have to tell Bootstrap responsive to treat the retina iPhones like 640px wide devices and not like 320px wide devices, but I don't know which media queries in responsive.css to change and how to change them.

Upvotes: 3

Views: 7453

Answers (1)

nickdos
nickdos

Reputation: 8414

I had a similar issue where I wanted the iPhone browser to render a portait viewport at a higher resolution than the default 320px. The OP appears to be asking this question:

I think I have to tell Bootstrap responsive to treat the retina iPhones like 640px wide devices and not like 320px wide devices, but I don't know which media queries in responsive.css to change and how to change them.

The fix I used was to modify the viewport meta tag:

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

I was then able to render at a width of roughly 400px. To achieve 640px, simply make the initial-scale value 0.5. Note this will affect all mobile-like devices, not just retina iphones, so you need to test this with multiple devices.

I used some javascript to see what the iphone window width was via:

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

and adding some HTML to the page:

<div>screen width: <span id="screenWidth"></span>px</div>

Upvotes: 1

Related Questions