浮动：权利;导致元素在iPhone / iPad上突破容器的元素

Question

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

你可以在这里看到这个页面： http://revivelab.com/demo_sites/iphoner/

这是我所说的突破：

当你在iphone上加载它时，它看起来没问题，但是如果你放大，那么这些元素会在它们包含的div之外弹出。

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

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

Answer 1

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

iPad和iPhone默认情况下将视图空间默认为模拟的980px宽度，并且为元素指定的最小尺寸为986px，其子元素#content_container的宽度为100％。

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

然后.content_left元素的实际宽度为1024px，超出了它的父实际宽度1014px。

因此，在我看来，您需要将这些尺寸设为网格。我认为有两种选择可以解决这个问题。

（1）将#content和.content_left元素的大小减小到970px，将标记的最小大小减小到980px。

（2）添加一个视口元标记，只是将页面扩展到超出最终的1034px宽度

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

我希望这会有所帮助。