浏览器渲染右边距iPhone/iPad/webkit
rob*_*kos 6 html css iphone webkit ipad
我在下面有一个html片段,可以在所有浏览器中完美呈现.然而,在iphone和ipad上的webkit中,当我捏页面(使其更小)时,我看到一个黑色边框,这是身体的背景颜色,只在右边缘闪耀.这只发生在我指定.headerpic div的宽度时.因为这是我在文档中唯一指定宽度的地方,所以我想知道为什么它不能一直渲染到右边缘(因为这理论上是文档中最宽的部分？).
我附上了一张从我的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>
在我的情况下使用:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
代替:
<meta name="viewport" content="width=device-width">
诀窍!
它将更清楚地说明您的问题：http://jsbin.com/ilenu5/5
我做了什么：
- 我将宽度增加到
#headerpic1286px - 我添加了背景颜色
#headerpic，它是红色
所以你的实际问题是：发生溢出
为什么？因为你没有设置你的viewport( width=device-width) 和 的最小物理宽度（以 px 或 cm 或 em 为单位）body，所以你的body宽度默认为 980px，并继承#wrapper-- 所以你的 986px#headerpic溢出了#wrapper，并使你的黑色背景出现。由于溢出区域宽度很小（986-980=6px），因此您会看到一条黑线。
| 归档时间： |
|
| 查看次数： |
9527 次 |
| 最近记录： |