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

Question

我在iPad屏幕的整个宽度上延伸了div块的问题。它似乎从屏幕右侧停止了大约20个像素。

截图：

对于菜单，我有一个div块和一个UL内部菜单本身。 UL的宽度设置为1000px，背景div块设置为宽度：100％;此背景的宽度恰好是1009px。

页脚是一个带背景的div块，还有两个浮动的div块。背景的宽度恰好是1004px。

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

Answer 1

你在iPad上看到了这个问题，因为它的默认视口是980像素（见Apple's docs）。因此，您所看到的效果就像将桌面浏览器缩小到1000像素一样，并向右滚动（它做同样的事情）。

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

@sandeep's solution是正确的，你如何实现它在Safari中可以正常使用，但在我尝试的其他任何浏览器中都没有。你是用户代理嗅探只为Safari提供代码吗？如果是，则不需要，您只需将min-width:1024px，或仅min-width:1000px应用于body标记，或.footerbg，但通常应用CSS。

Answer 2

我查看了你的网站，问题不仅出现在iPad上，还出现在PC版上，因为当水平卷轴在PC上时，页面的行为与iPad版本相同。检查一下自己。

<强>解决方案： 只需在您的身体中写下以下内容：

body{
 min-width:1024px;
}

Answer 3

这是有效的

<meta name="viewport" content="width=1003, initial-scale=1, maximum-scale=1">

Answer 4

谈到横向模式时，iPad屏幕宽度为1024像素，而不是1004。

Answer 5

您的宽度尺寸不正确。但不用担心。你只需要1024而不是1004。

希望这有帮助！

Answer 6

在页面中添加

<meta name="viewport" content="width=1000px">

适用于ipad上的所有浏览器，而不仅仅是safari

Answer 7

如果您/任何人只需要在iPad中修复，您可以这样做

<?php if ((bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPad')): ?>
    <meta name="viewport" content="width={{YOUR PREFERED WIDTH FOR IPAD}}">
<?php else: ?>
    <meta name="viewport" content="width=device-width">
<?php endif ?>

希望这有帮助：）

Answer 8

如果尝试使用视口元标记将视口宽度设置为设备宽度会发生什么？

<meta name="viewport" content="width=device-width, initial-scale=1">

来源：Mozilla Developer Network