浏览器渲染右边距iPhone / iPad / webkit
[英]Browser rendering right margin iPhone/iPad/webkit
问题描述
I have a html snippet below which renders perfectly in all browsers. 
我在下面有一个html片段，可以在所有浏览器中完美呈现。 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. 然而，在iphone和ipad上的webkit中，当我捏页面（使其更小）时，我看到一个黑色边框，这是身体的背景颜色，只在右边缘闪耀。 This only happens when I specifiy the width of the .headerpic div. 这只发生在我指定.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. 我附上了一张从我的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>
5 个解决方案
解决方案1
8 2013-02-22 16:53:51
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! 诀窍！
解决方案2
2 已采纳 2011-03-01 18:32:10
It will illustrate your problem a little bit clear: http://jsbin.com/ilenu5/5 它会清楚地说明你的问题： http ： //jsbin.com/ilenu5/5
What I did: 我做了什么：
- I Increased the width of the
#headerpicto 1286px我将#headerpic的宽度增加到1286px - I added a background color of
#headerpic, which is red我添加了#headerpic的背景颜色，它是红色的
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. 因为你没有设置你的viewport （ width=device-width ）和最小物理宽度（以像素或厘米或EM）的body ，让你的body默认宽度为980px，并通过继承#wrapper -让你的986px #headerpic溢出#wrapper ，使你的黑色背景出现。 Since the overflowed area width is small (986-980=6px), you see a black line. 由于溢出区域宽度很小（986-980 = 6px），您会看到一条黑线。
解决方案3
1 2011-03-01 15:03:30
制作#wrapper position:absolute修复问题。
解决方案4
0 2014-09-29 15:12:57
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. 解决了这个问题。
解决方案5
0 2016-03-12 18:00:32
Applying 应用
overflow-x:hidden;
to one of my divs did it 我的一个div做了它
Giving credit to @starkadh for the inspiration. 感谢@starkadh的灵感。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.