移动设备上不需要的可滚动水平空间答案

【问题标题】：Unwanted scrollable horizontal space on mobile devices移动设备上不需要的可滚动水平空间
【发布时间】：2017-12-06 21:15:41
【问题描述】：

我正在使用 Bulma CSS 框架构建这个网站http://104.236.64.172:8081（可能不相关）。该网站响应迅速，整体在移动设备上看起来很棒，除了一个我无法解决的小问题。

如果您在手机上打开此链接，您会看到右侧有一些不需要的水平空间。有点像一些备用的margin-right。但问题是我无法在我的桌面上调试它，因为它似乎没有出现在小宽度的大屏幕上。你能帮我调试一下吗？

【问题讨论】：

【解决方案1】：

我可以通过在 cont 类上隐藏 overflow-x 来解决这个问题。

例如：

.cont {
    max-width: 1110px;
    margin: 0 auto;
    overflow-x: hidden; /* THIS */
}

我尝试在 cont 的子类上添加相同的实现，但它似乎并没有像处理它的父类那样解决问题。如果有人有更好（或更安全）的解决方案，请随意使用它而不是这个，因为这可能会在以后产生不良影响。

另外，作为提示，您应该能够使用网络浏览器（在我的情况下为 Chrome）的检查功能，以便在移动设备上使用网站进行重现。 Here's a quick walkthrough.

【讨论】：

这确实解决了问题，但它似乎是一个 hack。
是的，我并不为此感到骄傲。它可能会在以后造成不必要的影响（即切断 cont 类中的水平滚动元素）。因此，如果有人能找到更好的解决方案，您可能希望将其标记为解决方案。