title: Retina iPhone not working with responsive Twitter Bootstrap
body: <p>I'm using Twitter Bootstrap with the responsive CSS for a web-page designed to run in a UIWebView.</p>
  
  <p>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".</p>
  
  <p>I have successfully added the following to my style.css to swap in and out the right images:</p>
  
  <pre><code>.normalres { display:block } /* or anything else */
  .retinares   { display:none  }
  
  @media all and (-webkit-min-device-pixel-ratio: 2) {
     .normalres { display:none  }
     .retinares   { display:block }
  }
  </code></pre>
  
  <p>I use these in the following context:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;meta name="description" content""&gt;
      &lt;meta name="author" content=""&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;link href="css/bootstrap.min.css" rel="stylesheet"&gt;
      &lt;link href="css/style.css" rel="stylesheet"&gt;
      &lt;link href="css/bootstrap-responsive-mod.css" rel="stylesheet"&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div class="container"&gt;
        &lt;div class="row"&gt;
          &lt;div class="span12"&gt;
            &lt;h5&gt;Why this phone app?&lt;/h5&gt; 
            &lt;img class="pull-right normalres" src="img/iphone.png"&gt;          
            &lt;img class="pull-right retinares" src="img/iphone_retina.png"&gt;
            &lt;p&gt;Blah Foo Bar&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt; &lt;!-- /container --&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Where the two images are 150px wide and 300px wide respectively.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>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.</p>