2

我正在尝试修复我的网站上发生在 iPhone 和 iPad 上的错误。

您可以在此处查看页面： http ://revivelab.com/demo_sites/iphoner/

这就是我所指的休息时间：

在此处输入图像描述

当您将它加载到 iPhone 上时，它起初看起来还不错，但如果您放大，元素会弹出其包含的 div 之外。

棕色/卡其色背景应用于宽度为 100% 的 div，然后将宽度为 1024px 的 div 置于其内部并居中，蓝绿色框位于该 div 内部。当它破裂时，它甚至会在 100% 宽度的容器之外破裂。

有没有人遇到过这个？任何解决方案的想法？

4

1 回答 1

2

问题似乎来自大多数移动浏览器中父元素大小和默认视口大小的不匹配。

iPad 和 iPhone 默认视空间为模拟的 980px 宽度，您分配给元素的最小尺寸为 986px，它的子元素 #content_container 的宽度为 100%。

现在 #content 元素的计算宽度为 1024 像素，带有填充（大于父最小值）。

然后 .content_left 元素的实际宽度为 1024 像素，超出其父级实际宽度 1014 像素。

所以在我看来你需要让这些尺寸网格化。我有两个选择，我认为可以解决这个问题。

(1) 将#content 和 .content_left 元素的大小减小到970px，将标签的最小尺寸减小到980px。

(2) 添加一个视口元标记来简单地将页面扩展到您最终得到的 1034px 宽度之外

<meta name="viewport" content="width=1034">

我希望这有帮助。

于 2012-09-28T16:05:25.397 回答