浏览器渲染右边距 iPhone/iPad/webkit答案

【问题标题】：Browser rendering right margin iPhone/iPad/webkit浏览器渲染右边距 iPhone/iPad/webkit
【发布时间】：2011-07-06 12:54:01
【问题描述】：

我在下面有一个 html sn-p，它可以在所有浏览器中完美呈现。然而，在 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>

【问题讨论】：

标签： iphone html css ipad webkit

【解决方案1】：

在我的情况下使用：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

代替：

<meta name="viewport" content="width=device-width">

成功了！

【讨论】：

这对我有用。似乎这应该是公认的答案。

【解决方案2】：

它将更清楚地说明您的问题：http://jsbin.com/ilenu5/5

我做了什么：

我增加了宽度 #headerpic 到 1286px
我添加了一个 #headerpic 的背景颜色，是红色的

所以你的实际问题是：发生溢出

为什么？因为你没有设置你的viewport（width=device-width）和body的最小物理宽度（单位为px或cm或em），所以你的body宽度默认为980px，由#wrapper继承-- 所以你的 986px #headerpic 溢出了#wrapper，并让你的黑色背景出现。由于溢出区域宽度很小（986-980=6px），您会看到一条黑线。

【讨论】：

谢谢！我将 body 的最小宽度设置为 986px，问题在 iphone/ipad 中得到修复，并且不影响普通浏览器。感谢您的帮助。
我想这是对问题发生原因的一个很好的解释，但对我来说，它似乎并没有真正转化为解决方案。 This other answer 为我解决了这个问题。

【解决方案3】：

制作#wrapper position:absolute 可以解决问题。

【讨论】：

true，这解决了 iphone/ipad 上的问题，但破坏了普通浏览器中的设计。

【解决方案4】：

就我而言：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

还有：

html, body {min-width:980px; overflow-x: hidden;}

解决问题。

【讨论】：

【解决方案5】：

申请

overflow-x:hidden;

我的一个 div 做到了

感谢@starkadh 的灵感。

【讨论】：