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.
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>
Related
I am adapting a fixed size website (800x600 pixels) to work on mobile phones and I have run in to some problems on the iPhone.
I have set the meta viewport tag with width=800 to fit the page exactly on the screen.
Unfortunately on the iPhone it centers the page on the height giving it an unwanted top-margin. It works fine on Android.
How can I get it to align to the top on iPhone?
Here is a simplified version of the page
<html>
<header>
<meta name="viewport" content="width=800">
</header>
<body>
<div style="width:800px; height: 600px;">
</div>
</body>
</html>
Try this , and it should rescale automatically
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
This is my first time building a responsive site, and as I tailor the CSS for the iPhone I'm running into a problem. The styles all apply correctly, the text changes size and the wrapper changes widths. The problem is the iPhone browser still opens up at a huge width, see the screenshot:
I'm using
#media all and (max-device-width: 480px) {}
to set the specific iPhone css. body {width:;} doesn't work.
Thanks for the help :)
You have to add the following to your page header
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
As in:
<!doctype html>
<html>
<head>
<title></title>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
</head>
<body>
</body>
</html>
I have a html snippet below which renders perfectly in all browsers. However in webkit on an iphone and ipad, when I pinch the page (so that its smaller), I see a black border which is the background color of the body shining through only on the right edge. This only happens when I specifiy the width of the .headerpic div. Since this is the only place in the document I specify the width, I was wondering why it stops short of rendering all the way to the right edge (since this is theoretically the widest part of the document?).
I've attached a photo of what it looks like from my ipad.
<!doctype html>
<html>
<head>
<style>
body {background-color:#000;color:#231f20;margin:0;}
#wrapper {background-color:#fff;min-height:1000px;}
#header .headerpic {height:102px;padding-top:80px;margin:0 auto;width:986px;}
#footer {color:#fff;}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="headerpic">
</div>
</div>
</div>
<div id="footer">
</div>
</body>
</html>
In my case using:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Instead of:
<meta name="viewport" content="width=device-width">
Did the trick!
It will illustrate your problem a little bit clear: http://jsbin.com/ilenu5/5
What I did:
I Increased the width of the
#headerpic to 1286px
I added a
background color of #headerpic,
which is red
So the your actual problem is: overflow occured
Why?
because you don't set your viewport (width=device-width) and the minimum physical width (in px or cm or em) of body, so your body width by default is 980px, and inherited by #wrapper-- so your 986px #headerpic overflows the #wrapper, and makes your black background appear. Since the overflowed area width is small (986-980=6px), you see a black line.
Making #wrapper position:absolute fixes the problem.
In my case this :
<meta name="viewport" content="width=device-width, initial-scale=1.0">
And :
html, body {min-width:980px; overflow-x: hidden;}
Fixes the problem.
Applying
overflow-x:hidden;
to one of my divs did it
Giving credit to #starkadh for the inspiration.
I want to display very wide, panoramic images in Mobile Safari (iPhone, iPod, iPad). These work fine in OS X Safari and in other browsers, but on Mobile Safari there seems to be a limit on the maximum image width.
Consider this web page:
http://basepath.com/public/test1.html
with this source:
<!DOCTYPE HTML>
<html>
<head>
<meta name = 'viewport' content = 'width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0'>
<title>Test Image 1</title>
</head>
<body>
<p>
2415 x 750 (about 3.2:1)
<p>
<img src='http://farm5.static.flickr.com/4129/4987348894_76194e79d6_o.jpg' />
</body>
</html>
It does exactly what I want on Mobile Safari. You can pan the photo. The aspect ratio is about 3.2:1.
But a wider image, about 4:1, gets scaled down, as seen on this page:
[http://]basepath.com/public/test2.html
[My low reputation prevents me from providing the above as a link. Limited to just one.]
The source is identical except for the commentary and image:
<!DOCTYPE HTML>
<html>
<head>
<meta name = 'viewport' content = 'width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0'>
<title>Test Image 2</title>
</head>
<body>
<p>
3028 x 750 (about 4:1)
<p>
<img src='http://farm5.static.flickr.com/4113/4994072964_1a7f7f90fe_o.jpg' />
</body>
</html>
You have to view these on Mobile Safari to see the problem.
Before you answer, some additional facts:
Image #2, which doesn't work, is only 200K (very low JPEG quality). Image #1, which does, is 700K. So size isn't the problem.
Putting an explicit width and height on the IMG element does indeed make the image the right size, but it's scaled up and therefore has jaggies. I want actual pixels. The problem therefore seems to be in loading the image originally, not processing it for presentation.
I've tried it without the viewport meta stuff, with no effect.
OK, now for my questions:
Is there in fact a limit on how wide Mobile Safari will show an image? Does anyone know of documentation for it, and, if so, what the rules are?
Is there any way to get around the problem? I've horsed around with JavaScript quite a bit to try to construct dynamic HTML to do the job, but, as I said above, I think the problem occurs when the image is first downloaded, far too early for anything done in JavaScript to be effective.
I found something about the rules that are applied whether an image is automatically downscaled in mobile safari:
http://teknocat.org/blog/computer-stuff/web-development/show/6/mobile-safari-background-image-scaling-quirk
Late to the game, but I had the same question and ended up getting the info from the horse's mouth here: Apple Safari Docs down at the Know iOS Resource Limits topic. Lot's of potential gotchas in there.
If you're using DIV with background attribute and you know the size of the image then set background-size attribute with image width and height.
background-size:3028px 750px
If using img tag then set the width and height values
<img src="image.jpg" width="3028px" height="750px" />
then it should work.
The following code does not fit onto the iphone screen;
how do I have to define the viewport?
<html>
<body>
<center>
<div id="karteu" style="background: url('../customer/Karten/karte1.jpg') no-repeat left center;width:714px;height:540px;" >
</div>
</body>
</html>
Normally the site should be zoomed, so i first should see the website in small, and then be able to zoom that i see it in the original size, but in my case it does not, when i call the site, the zoom is, that the image has this original size already, and that i have to scroll, but i dont want to scroll,...i want to use the normal safari mobile zoom and then scroll
The solution at the bottom does not zoom anything.
I want to see the overview of the image at the beginning.
Then i want to be able to zoom with the normal safari zoom functions,..
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
use the following meta tag:
<meta name="viewport" content="width=*your site width*, initial-scale=0.30">
works for both tablet and mobile