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.
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">
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>
I am using jQuery mobile in its simplest form.
Just added a page with a header content and footer
in the content I've added many test to get a scroller
The divs seem to be as wide as the word 'test', therfore the scroller only applys to a very small portion of the width of the screen.
When I try to scroll outside of the word 'test' the whole page is moving, without actually scrolling the content area.
I've added the following meta ta g to the head section:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no;" />
it didn't do anything.
Any ideas?
Try putting:
<div data-role="content" data-theme="c" style="width: 100%">
I cannot for the life of me figure out why there are scroll bars appearing on my iframe Page tab. The width is set at 500px, after knocking it down 5px at a time from 515px. There are no margins, and the height setting is on "fluid." When I view the html page that the iframe is showing directly, there is no extra white space, so it looks like Facebook is adding white space (a margin or pad?) on the left side of the iframe. The odd thing is that the scroll distance has remained the same as I've narrowed the page down from 515px to 500px. Further, the "fluid" option for the height does not seem to be applying to the iframe, so I can't use the hidden tag in my CSS or half of my content is chopped off.
Is this an issue for anyone else, or am I just doing something wrong? I'll post the code for the page below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>index_loc3</title>
<link rel="stylesheet" type="text/css" href="loc_styles.css" />
<script language="javascript" src="facebox/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="facebox/facebox.css" />
<script language="javascript" src="facebox/facebox.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox()
})
</script>
</head>
<body>
<div id="container" style="width:500px">
<div id="header">
<img src="images/logo_slice.jpg" alt="" width="199" height="152" hspace="8" vspace="40" align="left" />
<img src="head_images/ymca1.jpg" align="right">
</div>
<div id="name"><img src="images/text_slice.jpg" alt="YMCA of Greater Fort Wayne" width="485" height="37" hspace="12" />
</div>
<br />
<div id="content1"><img src="images/cent_loc3.jpg" vspace="5">
<img src="images/park_loc3.jpg" alt="Parkview Family Y" vspace="10">
<img src="images/wells_loc2.jpg" alt="Wells County Y" vspace="6">
</div>
<div id="content2"><img src="images/jorg_loc3.jpg" vspace="5">
<img src="images/ren_loc3.jpg" width="240" height="216" vspace="10">
<img src="images/whit_loc3.jpg" vspace="5">
<img src="images/camp_loc3.jpg" vspace="5">
</div>
</div>
</body>
</html>
UPDATE: I found a bit of code that got the iframe to resize properly and get rid of the scroll bars. However, this seems to have caused my Facebox implementation to get messed up. It doesn't appear Facebox recognizes the change in screen position to change the center for Facebox, so it is popping up at the top of the page instead of the current center of the screen.
I had a similar problem where I had vertical and horizontal scrollbars being shown even when they were inactive (in Opera and Firefox, while in IE and Chrome the page was shown without the scrollbars). I had "fluid" height and width selected in the application settings. The problem finally disappeared when I reverted the height setting to "settable" and used the FB.Canvas.setSize function again.
To me it seems that Facebook's "fluid" setting for the height isn't working correctly for all browsers at the moment, maybe try setting it back to settable and going from there.
go to https://developers.facebook.com/apps/YOUR_APP_ID/advanced then
scroll to Canvas Settings then set Canvas Width and Canvas Height as you wish
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