响应式 CSS 溢出问题答案

【问题标题】：Responsive CSS overflow issue响应式 CSS 溢出问题
【发布时间】：2015-10-31 20:08:51
【问题描述】：

我有一个响应式网站，不知何故有一个奇怪的溢出区域/不应该发生的问题。这需要真正的专家眼光来发现问题，我很难过。

html、body 和 body #wrapper 的宽度都是根据设备大小设置的，并且它们的 overflow-x 设置为隐藏，因此根本不应该有 OVERFLOW 区域，但它仍然是棕色区域到窄页设计的右侧。

在 iOS 中，它们会以适当的缩放比例显示，但您可以向右滚动到棕色溢出区域。

在 Android 设备上，页面开始时会真正缩小并包括棕色溢出区域。

我这辈子都无法弄清楚是什么导致了这个溢出区域，因为宽度和最大宽度是明确设置的，并且溢出-x 被设置为隐藏，所以任何东西都不应该超出页面容器。

可以通过http://gowestyoungmom.com/查看该网站。

【问题讨论】：

标签： css html responsive-design

【解决方案1】：

更改您的 css 的这一部分(responsive.css line 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;
}

【讨论】：

感谢您的回复，这确实有所帮助。溢出区域不再存在，因为它现在充满了身体。但这并不能解决整体问题。该页面现在仍然在 Android 和 iOS 上开始缩小。现在，窄列不再以预期的宽度显示，而是位于中间。所以仍然是错误的宽度，现在在 iOS 和 Android 中。前进一步，后退两步。您可以在此处看到此图像：redesigned.com/misc/GWYM_01.png（我想不出一种将图像添加到 cmets 的方法……抱歉。）有什么办法解决这个问题吗？
应用这些样式并将这个`initial-scale=1.0`添加到视口元数据。
当我做出建议的更改并在上面留下评论时，我的视口标签中有 initial-scale=1.0。这并没有解决问题。我刚刚尝试从这里添加一个视口调整 javascript 函数：stackoverflow.com/questions/8735457/… 但似乎我仍然遇到问题，因为页面有时会偏离中心，因为它仍然比视口更宽。如果我能找出应该解决的原始问题并可能阻止需要这样的解决方法。想法？我真的需要一些帮助来解决这个问题。 :-(
@JoshuaJarman 很抱歉重播晚了。您不需要使用 javascript。您可以通过媒体查询和视口来实现。
我明天才能回来查看，但请随时留下任何其他建议，并希望在没有 javascript 解决方法的情况下使其工作。现在我设置了交错的最大宽度和 javascript 并让它在移动 chrome 和 safari 中工作，但不是移动 firefox。非常感谢您的帮助，非常感谢。