css - 响应式 CSS 溢出问题

Question

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

html、body 和 body #wrapper 宽度都是根据设备大小设置的，它们的 overflow-x 设置为 hidden 所以根本不应该有 OVERFLOW 区域，但它仍然存在作为窄页面设计右侧的棕色区域。

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

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

我终其一生都无法弄清楚是什么导致了这个溢出区域，因为宽度和最大宽度已明确设置并且 overflow-x 已设置为隐藏，因此任何内容都不应超出页面容器。

可以在 http://gowestyoungmom.com/ 查看该站点.

Answer 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;
}