iPad CSS 页面宽度

Question

我在 iPad 和台式机上的页面和页眉存在一些问题。

当您查看 http://www.photopile.me 时在电脑上，图片和页眉/页脚应该 100% 延伸到边缘。

当您在 iPad 上访问它时，它不会显示页面的整个宽度，并且 100% 页眉会调整大小。我想要 ipad 显示页面的整个宽度。

我刚刚开始针对 iPad 进行优化，但我错过了什么？我确定我缺少一个愚蠢的小规则。这是标题 HTML

<header>
    <div id="header-wrapper">
        ... header content ...
    </div>
</header>
<div id="page-content">
        .... photos ....
</div>

和CSS

header {
    background: url('../images/header-bg.jpg') repeat-x top left;
    z-index: 500;
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, .9);
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .9);
    box-shadow: 0 5px 10px rgba(0, 0, 0, .9);
    position: fixed;
    top: 0;
    width: 100%;
}
#header-wrapper {
    padding: 10px;
    position: relative;
}
#page-content {
    margin: 0 auto;
    z-index: 400;
    position: relative;
    margin-top: 91px;
    overflow: hidden;
}

希望这些信息足够了!

Answer 1

您可以通过元标记查看缩放控件。最近，当 iPad 放大我的页面时，我遇到了一些问题，但我没有意识到。 (这导致我无意中开发了不正确的尺寸)

<meta name="viewport" content="initial-scale=1">

可能的值:

• 初始规模
• 最大尺度
• 最小尺度
• 用户可扩展
• 宽度
• 高度

您可以在这里阅读更多内容:http://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariHTMLRef/Articles/MetaTags.html