div块的iPad背景不跨越整个屏幕宽度

Question

在我的iPad屏幕的整个宽度上,div块一直存在问题.它似乎从屏幕右侧停止了大约20个像素.

截图:

对于菜单,我有一个div块和一个UL内部的菜单本身.UL的宽度设置为1000px,背景div块设置为宽度:100%; 这个背景的宽度恰好是1009px.

页脚是一个带背景的div块,以及两个浮动的div块.背景的宽度恰好是1004px.

我在其他网站上遇到过这个问题,特别是在这方面.任何人都有任何想法？

Answer 1

你在iPad上看到了这个问题,因为它的默认视口是980像素(参见Apple的文档).所以,你所看到的效果是一样的,如果你收缩你的桌面浏览器到小于1000个像素,并滚动到右侧(它做同样的事情)的.

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

@ sandeep的解决方案是正确的,你如何实现它在Safari中工作正常但在我尝试的其他任何浏览器中都没有.你是用户代理嗅探只为Safari提供代码吗？如果是这样,没有必要,您可以只应用min-width:1024px,或者只是min-width:1000px应用于您的body标签,或者.footerbg您通常应用CSS.

Answer 2

我看了你的网站,问题不仅在iPad上,而且在PC版本上,因为当水平卷轴在PC上时,页面的行为与iPad版本相同.自行检查.

解决方案: 只需在您的身体中写下以下内容:

body{
 min-width:1024px;
}