div 块的 iPad 背景未跨越整个屏幕宽度 [英] iPad background for div blocks not spanning entire width of screen

问题描述

我一直遇到 div 块沿 iPad 屏幕的整个宽度伸展的问题.它似乎在距屏幕右侧约 20 个像素处停止.

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 块和一个用于菜单本身的 UL.UL的宽度设置为1000px，背景div块设置为width:100%；这个背景的宽度正好是 1009px.

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块，还有两个浮动的div块.这个背景的宽度正好是 1004px.

The footer is a div block with the background, and two floated div blocks. Width of the background for this is exactly 1004px.

我在其他网站上遇到过这个问题，特别是在这方面.有人知道吗?

I've had this problem on other websites, specifically in this area. Anyone have any idea?

推荐答案

您在 iPad 上看到了这个问题，因为它的默认视口是 980 像素(请参阅 Apple 的文档).因此，您所看到的效果与将桌面浏览器缩小到 1000 像素以下并向右滚动一样(效果相同).

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).

您会注意到间隙的大小根据浏览器窗口的宽度而变化.这是因为当您为包装器 div 设置 width:100% 时，您是在告诉它们将大小调整为包含元素的宽度，在这种情况下是浏览器窗口或 iPad 的视口.您没有告诉他们根据其中的内容调整大小.

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 not telling them to resize to the content within.

@sandeep 的解决方案 是正确的解决方案，您如何实施它在 Safari 中对我来说效果很好，但不是在我尝试使用的任何其他浏览器中.您是否正在嗅探用户代理以仅将代码提供给 Safari?如果是这样，则没有必要，您可以将 min-width:1024px，甚至只是将 min-width:1000px 应用到您的 body标签，或者 .footerbg 但是你通常应用 CSS.

@sandeep's solution is 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:1000px to your body tag, or .footerbg however you normally apply CSS.

这篇关于div 块的 iPad 背景未跨越整个屏幕宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！