Html iPad CSS 页面宽度
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/5893234/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
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 #wrapper
because 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