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

问题描述

我在iPad屏幕整个宽度上延伸的div块仍然存在问题。

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％;此背景的宽度正好是1009像素。

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块。此背景的宽度正好是1004像素。

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像素href =http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebcontent/usingtheviewport/usingtheviewport.html#//apple_ref/doc/uid/TP40006509-SW27 =nofollow>苹果的文档）。因此，您看到的效果与将桌面浏览器缩小到小于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).

您会注意到，间隙的大小根据浏览器窗口的宽度而变化。这是因为当你设置宽度：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 到你的身体标签或 .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屋！