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

问题描述

我已经与格块沿着我的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的宽度设定为1000像素和背景股利块被设置为宽度：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像素（见<一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但不在任何浏览器等我尝试它。是否用户代理嗅探服务于code只有Safari浏览器？如果是这样，没有必要，你可以应用最小宽度：1,024 ，甚至只是最小宽度：1000像素你的体标记或 .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.

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