响应式CSS溢出问题

Question

我有一个响应式网站，出现了一些不应该发生的奇怪溢出区域/问题。需要真正的专家来找到问题，我被卡住了。

html、body和body #wrapper的宽度都是基于设备大小设置的，并且它们的overflow-x设置为hidden，因此根本不应该有任何溢出区域，但它仍然存在于狭窄页面设计的右侧作为棕色区域。

在iOS上，它们以正确的缩放显示，但您可以向右滚动到棕色溢出区域。

在Android设备上，页面开始非常缩小，并包括棕色溢出区域。

我无法想象是什么导致了这个溢出区域，因为宽度和最大宽度都是明确设置的，overflow-x设置为隐藏，因此没有任何东西应该超出页面容器。

该网站可在http://gowestyoungmom.com/中查看。

- Joshua Jarman

Answer 1

请更改您的CSS代码中的这部分内容（responsive.css第175行）

@media only screen and (max-device-width: 360px) and (min-device-width: 331px)
html, html body, body #wrapper 
{
    width: 330px !important;
    min-width: 320px !important;
    max-width: 360px !important;
    overflow-x: hidden;
}

并替换为这个

@media only screen and (max-device-width: 360px) and (min-device-width: 331px)
html, html body, body #wrapper {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow-x: hidden;
}

- Alex

---

谢谢您的回复，这确实有所帮助。溢出区域已经不存在了，因为现在它被填充了身体。但这并没有解决整个问题。页面仍然在Android上缩小显示，在iOS上也是如此。现在窄列置于中央，而不是以预期的宽度显示。所以依旧是错误的宽度，在iOS和Android上都是如此。一步向前，两步向后。您可以在这里查看其图像： http://redesigned.com/misc/GWYM_01.png （我找不到一种方法将图像添加到评论中...抱歉。）有什么解决方法吗？ - Joshua Jarman

将这些样式应用并将 initial-scale=1.0 添加到视口元数据中。 - Alex

当我进行了建议的更改并留下上面的评论时，在我的视口标记中有initial-scale=1.0。但是，那并没有解决问题。我刚刚尝试从此处添加一个视口调整JavaScript功能： https://dev59.com/Bmoy5IYBdhLWcg3wKq4S但似乎我仍然遇到了问题，因为页面有时会偏离中心，因为它仍然比视口宽。如果我能找出原始问题，那应该可以解决问题，可能还可以防止需要这样的解决方法。你有什么想法吗？我真的需要一些帮助来解决这个问题。 :-( - Joshua Jarman

@JoshuaJarman 很抱歉回复晚了。您不需要使用JavaScript，可以通过媒体查询和视口来实现。 - Alex

我明天之前无法回来查看，但请随意留下任何额外的建议，我很想让它在没有JavaScript解决方法的情况下运行。目前，我设置了交错的最大宽度和JavaScript，并且在移动Chrome和Safari中可以正常工作，但在移动Firefox中无法正常工作。非常感谢您的帮助，非常感激。 - Joshua Jarman