width - 响应式网站 : How to get rid of horizontal scroll bar?

Question

我目前正在创建一个响应式网站。我注意到当您水平滚动时右侧的空白空间存在问题。我可以通过添加 overflow-x: hidden 来移除水平滚动条。但它不适用于 iPhone 和 iPad 等移动设备。

因此，我尝试添加 min-width 因为它有助于摆脱空白空间。但我不能将 min-width 放在 full.css 上(例如 min-width:1000px;)，因为它会设置为全宽 - 请参见下面的示例:

完整的.css

#wrapper {
    width: 1000px;
    margin: 0 auto;
}

responsive.css(小于1000px)

#wrapper {
    width: 100%;
    margin: 0;
}

我想知道您是否知道如何解决这个问题？让我知道您是否有更好的选择。或者我应该创建一个新的包装器 ID？

Answer 1

我时不时地遇到这个问题，解决问题的很大一部分是确定是罪魁祸首的元素。我刚刚想出了这个小的 jQuery 脚本，您可以在浏览器的 JavaScript 控制台中运行它来查找哪些元素比主体宽度宽，从而导致出现令人讨厌的滚动条。

$.each( $('*'), function() { 
    if( $(this).width() > $('body').width()) {
        console.log("Wide Element: ", $(this), "Width: ", $(this).width()); 
    } 
});