CSS div 块的 iPad 背景未跨越整个屏幕宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5708203/
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 background for div blocks not spanning entire width of screen
提问by Don Wilson
I've had a continued problem with div blocks stretching along the entire width of my iPad's screen. It seems to stop about 20 pixels from the right side of the screen.
我一直有 div 块沿着 iPad 屏幕的整个宽度伸展的问题。它似乎在距屏幕右侧约 20 个像素处停止。
Screenshots:
截图：
For the menu, I've got a div block and a UL inside for the menu itself. UL's width is set to 1000px and the background div block is set to width:100%; Width of this background is exactly 1009px.
对于菜单，我有一个 div 块和一个菜单本身的 UL。UL的宽度设置为1000px，背景div块设置为width:100%；这个背景的宽度正好是 1009px。
The footer is a div block with the background, and two floated div blocks. Width of the background for this is exactly 1004px.
页脚是一个带有背景的 div 块，以及两个浮动的 div 块。这个背景的宽度正好是 1004px。
I've had this problem on other websites, specifically in this area. Anyone have any idea?
我在其他网站上遇到过这个问题，特别是在这个领域。任何人有任何想法？
回答by Walter Cameron
You're seeing the problem on the iPad because its default viewport is 980 pixels (see Apple's docs). So the effect you're seeing is the same as if you shrink your desktop browser to less than 1000 pixels, and scroll to the right (it does the same thing).
您在 iPad 上看到了这个问题，因为它的默认视口是 980 像素（请参阅Apple 的文档）。因此，您看到的效果与将桌面浏览器缩小到 1000 像素以下并向右滚动（它做同样的事情）是一样的。
You'll notice the size of the gap changes depending on the width of the browser window. This is because when you're setting width:100% to your wrapper divs, you're telling them to resize to the width of the containing element, which in this case is the browser window, or the iPad's viewport. You're nottelling them to resize to the content within.
您会注意到间隙的大小根据浏览器窗口的宽度而变化。这是因为当您为包装器 div 设置 width:100% 时，您是在告诉它们将大小调整为包含元素的宽度，在这种情况下是浏览器窗口或 iPad 的视口。你不是告诉他们调整里面的内容。
@sandeep's solutionis the correct one, and how you've implemented it works fine for me in Safari but not in any browser other I try it in. Are you user agent sniffing to serve the code to only Safari? If so, there's no need, you can just apply the min-width:1024px, or even just min-width:1000pxto your bodytag, or .footerbghowever you normally apply CSS.
@sandeep 的解决方案是正确的，你如何实现它在 Safari 中对我来说很好，但在我尝试使用的任何其他浏览器中都没有。你的用户代理是否正在嗅探只为 Safari 提供代码？如果是这样，则没有必要，您可以只应用min-width:1024px, 甚至只是应用min-width:1000px到您的body标签，或者.footerbg您通常应用 CSS 的方式。
回答by sandeep
I had a look at your website, the problem is not only on the iPad but also on the PC version because when the horizontal scroller is on PC then the page behaves the same as it does on iPad version. Check yourself.
我查看了您的网站，问题不仅出在 iPad 上，还出在 PC 版本上，因为当水平滚动条在 PC 上时，页面的行为与 iPad 版本上的相同。自行检查。
Solution:Just write the following in your body:
解决方案：只需在您的正文中写下以下内容：
body{
min-width:1024px;
}
回答by Rem
this works
这有效
<meta name="viewport" content="width=1003, initial-scale=1, maximum-scale=1">
回答by Till
The iPad-Screen width, when talking landscape mode, is 1024 pixel, not 1004.
iPad 屏幕宽度，在谈论横向模式时，是 1024 像素，而不是 1004。
回答by Otroberts
You got the width size incorrect. But no need to worry. You just need to have 1024 instead of 1004.
你得到的宽度大小不正确。但无需担心。你只需要 1024 而不是 1004。
Hope this helps!
希望这可以帮助！
回答by zekia
Add in your page's head
添加到您的页面头部
<meta name="viewport" content="width=1000px">
It works for all browsers on ipad, not just safari
它适用于 ipad 上的所有浏览器，而不仅仅是 safari
回答by Ijas Ameenudeen
If you/anyone need to fix only in iPads, You can do like
如果你/任何人只需要在 iPad 上修复，你可以这样做
<?php if ((bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPad')): ?>
<meta name="viewport" content="width={{YOUR PREFERED WIDTH FOR IPAD}}">
<?php else: ?>
<meta name="viewport" content="width=device-width">
<?php endif ?>
Hope this help :)
希望这有帮助:)
回答by bheussler
What happens if you try using the viewport meta tag to set the viewport width to the device width?
如果您尝试使用视口元标记将视口宽度设置为设备宽度会发生什么？
<meta name="viewport" content="width=device-width, initial-scale=1">
Source: Mozilla Developer Network
