I'm currently utilizing Twitter Bootstrap alongside responsive CSS for a web page that is optimized to run in a UIWebView.
My goal is to ensure the consistency of the page's appearance across all iPhones, with an exception for images. These images are required to be displayed at double resolution on retina iPhones while occupying the same screen space.
To achieve this, I have successfully integrated the following code snippet into my style.css file:
.normalres { display: block; }
.retinares { display: none; }
@media all and (-webkit-min-device-pixel-ratio: 2) {
.normalres { display: none; }
.retinares { display: block; }
}
The implementation of these classes occurs within this structure:
<!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 choose this mobile 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>
In this context, the two images have dimensions of 150px and 300px respectively.
However, I am encountering an issue specifically with the retina iPhone. While the correct image loads, it does not align to the right as expected (with text wrapping around). This behavior mirrors that of the non-retina iPhone, where everything displays correctly. The problem likely stems from Bootstrap treating the retina iPhone as having a low resolution instead of recognizing the higher pixel density and adjusting layout accordingly.
To address this, I need to specify that Bootstrap should treat retina iPhones like devices with a width of 640px, rather than assuming they are only 320px wide. I must identify which media queries in responsive.css require modification and make the appropriate adjustments.