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">

可能的值:

• initial-scale
• max-scale
• min-scale
• user-scalable
• width
• height

您可以在此处阅读更多信息:http://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariHTMLRef/Articles/MetaTags.html