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

您会注意到间隙的大小会根据浏览器窗口的宽度而变化.这是因为当您将 width:100% 设置为包装 div 时，您是在告诉它们调整包含元素的宽度，在本例中是浏览器窗口或 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屋！