当页眉和页脚的宽度为100％时，iPhone无法正确呈现页面

Question

在这里应该是一个简单的。但显然不适合我。

基本上，我正在开发一个网站，（不幸的是，我无法提供链接），设计要求页眉和页脚跨越100％，而页面内的所有内容（包括标题中的内容和页脚）仅跨越940px并以包装器为中心。

我使用的基本页面设置是：

<div id="header">
    <div class="headerwrap">
      CONTENT HERE...
    </div>
</div>

<div id="contentwrapper">

     MAIN PAGE CONTENT HERE...

</div>

<div id="footer">
     <div class="footerwrap">
        FOOTER CONTENT HERE...
     </div>
</div>

这是我正在使用的CSS：

.footerwrap {
    position:relative;
    margin:0 auto;
    width:940px;
}

 .headerwrap {
    position:relative;
    margin:0 auto;
    width:940px;
}

.contentwrapper {
    position:relative;
    margin:0 auto;
    width:940px;
}

#header, #footer {
    width:100%;
    float:left;
}

这在浏览器中完美运行，但在iPhone上，它会将所有内容推送到页面左侧，并且只允许页眉和页脚中的图像跨越整个页面时大约200px。

这是一个它应该是什么样子的例子：

以下是iPhone上的样子。

Answer 1

以下是我在iPhone上测试过的一个简单示例。

*{margin:0; padding:0;}
html,body{width:100%;}
header, footer {width:100%; height:200px;background:black;}
div{width:960px; height:500px; background:gray; margin:0 auto;}

Demo