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

【问题标题】：iPad background for div blocks not spanning entire width of screendiv块的iPad背景不跨越整个屏幕宽度
【发布时间】：2011-08-08 04:04:03
【问题描述】：

我一直遇到 div 块沿着 iPad 屏幕的整个宽度延伸的问题。它似乎在距屏幕右侧约 20 像素处停止。

截图：

对于菜单，我有一个 div 块和一个用于菜单本身的 UL。 UL的宽度设置为1000px，背景div块设置为width:100%；这个背景的宽度正好是 1009px。

页脚是一个带背景的 div 块，以及两个浮动的 div 块。这个背景的宽度正好是 1004px。

我在其他网站上遇到过这个问题，特别是在这个领域。有人知道吗？

【问题讨论】：

你的UL和背景图片宽度不应该是1024px吗？
一定是有些混乱。两个 DIV 块都设置为 100% 宽度。两个背景图像都是 1 像素宽 x 高。正如您在页脚中看到的那样，内容一直向右移动，但背景的 DIV 不是。
景观中也会出现这些问题。

标签： iphone css ipad background width

【解决方案1】：

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

您会注意到间隙的大小会根据浏览器窗口的宽度而变化。这是因为当您将 width:100% 设置为包装 div 时，您是在告诉它们调整包含元素的宽度，在本例中是浏览器窗口或 iPad 的视口。您没有告诉他们根据内容调整大小。

@sandeep's solution 是正确的，你实现它的方式在 Safari 中对我来说很好，但在我尝试使用的其他浏览器中却不行。你的用户代理是否在嗅探以仅向 Safari 提供代码？如果是这样，则无需，您可以将min-width:1024px 或什至仅将min-width:1000px 应用到您的body 标记或.footerbg，但您通常应用CSS。

【讨论】：

像 Sandeep 建议的那样将其添加到正文中不起作用，但是您建议将其添加到 .footerbg 和其他包含 div 的建议可以正常工作。谢谢！
@waletr cameron；它在所有浏览器中都可以使用，请检查它，因为不要实现它。
如果页面上的元素总宽度超过 1024px，当然你必须设置总宽度的 min-width。

【解决方案2】：

如果您尝试使用视口元标记将视口宽度设置为设备宽度会怎样？

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

来源：Mozilla Developer Network

【讨论】：

【解决方案3】：

如果您/任何人只需要在 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 ?>

希望有帮助:)

【讨论】：

对于未来，您应该使用 false !== strpos(...) 而不是 (bool)strpos(...)。 strpos 可能会返回数字 0，这将导致错误（布尔），即使在字符串中找到 iPad。

【解决方案4】：

在页面头部添加

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

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

【讨论】：

【解决方案5】：

我查看了您的网站，问题不仅在 iPad 上，而且在 PC 版本上，因为当水平滚动条在 PC 上时，页面的行为与在 iPad 版本上的行为相同。检查自己。

解决方案： 只需在您的正文中写下以下内容：

body{
 min-width:1024px;
}

【讨论】：

我在网站代码的底部添加了它，它根本没有修复它。
我认为这是相当 ipad/iphone 特定的
请定义因为当我检查你的源代码时它没有在那里定义。
在进行移动或表格构建时，您可以使用大量元标记（名称=视口）选项，包括初始和最小/最大缩放。这个问题还涉及纵向到横向的问题。 stackoverflow.com/questions/1230019/…
我只在 iPad 上遇到了同样的问题。设置 user-scalable=no 会阻止一些访问者在较小的屏幕上缩小，这很疯狂。而“在 PC 上”对 Web 开发人员来说没有任何意义。

【解决方案6】：

这行得通

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

【讨论】：

【解决方案7】：

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

希望这会有所帮助！

【讨论】：

【解决方案8】：

在横向模式下，iPad 的屏幕宽度是 1024 像素，而不是 1004。

【讨论】：

div block is set to width:100%; 顶部和底部 div 的宽度都设置为 100%，但是它们呈现给给定的像素宽度。