Html iPad CSS 页面宽度

iPad CSS Page Width

提问by Brenden

I'm having some issues with my page and header on the iPad vs desktop.

我在 iPad 和桌面上的页面和页眉有一些问题。

When you look at http://www.photopile.meon the computer, the pictures and header/footer should stretch 100% of the way to the edge.

当您在计算机上查看http://www.photopile.me时，图片和页眉/页脚应 100% 拉伸到边缘。

When you go to it on the iPad, it doesn't show the full width of the page and the 100% header gets resized. I'd like the ipad to show the full width of the page.

当您在 iPad 上访问它时，它不会显示页面的全宽，并且 100% 的标题会被调整大小。我希望 ipad 显示页面的全宽。

I'm just getting started optimizing for iPad, but what am I missing? I'm sure there's a stupid little rule I'm missing. Here is the header HTML

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

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

and CSS

和 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;
}

Hope that's enough info!

希望这是足够的信息！

采纳答案by sandeep

@brenden,

@布兰登，

write min-width:1024px;instead of min-width:1180px;in the #wrapperbecause it's a problem of your PC also. Check yourself.

写min-width:1024px;而不是min-width:1180px;in#wrapper因为这也是您的 PC 的问题。自行检查。

回答by Benjamin

You may look into the zoom control via meta tags. I had some issues with this recently when the iPad was scaling up my page and I didn't realize it. (which caused me to inadvertently develop with incorrect sizing)

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

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

Possible values:

可能的值：

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

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

You can read up more on it here: http://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariHTMLRef/Articles/MetaTags.html

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