Browser rendering right margin iPhone/iPad/webkit
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
#headerpicto 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.
加载中,请稍侯......
精彩评论