如何调试不需要的响应断点？答案

【问题标题】：How to debug unwanted responsive breakpoints?如何调试不需要的响应断点？
【发布时间】：2018-02-20 02:04:36
【问题描述】：

我目前正在使用 Bootstrap 4 alpha 4。

我买了一个网站，我开始研究和修改。我有一个特别奇怪的问题，我认为它一定与媒体查询有关。最初的开发者拒绝解决这个问题。

当我访问该网站并将视口宽度调整到 992 像素和 1008 像素（包括）之间的任何位置时，网站的部分会消失，因为该响应断点未在已建立的 Bootstrap 类中定义。我已经使用最新的 Chrome 和 FF 浏览器对此进行了测试。

有人知道我该如何调试这个东西吗？

我尝试在 CSS 文件中搜索值 992 和 1008 以及 +/- 1，但在任何地方都找不到 1008 值（在整个项目中！）和 992 value 在样式表 AFAIK 中正常使用。

你可以看到这个问题live here。当您在 992px 和 1008px 之间调整浏览器宽度时，徽标将消失。

【问题讨论】：

标签： bootstrap-4

【解决方案1】：

看起来徽标所在的容器的最大宽度比其激活所需的最小宽度SMALLER。 p>

尝试更改它（theme.css，第 703-719 行）：

@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }
}
@media (min-width: 992px) {
    .container {
        max-width: 940px;
    }
}
@media (min-width: 1200px) {
    .container {
        max-width: 1024px;      
        padding-left:0;
        padding-right:0;        
    }
}

到这里：

@media (min-width: 768px) {
    .container {
        max-width: 768px;
    }
}
@media (min-width: 992px) {
    .container {
        max-width: 992px;
    }
}
@media (min-width: 1200px) {
    .container {
        max-width: 1200px;      
        padding-left:0;
        padding-right:0;        
    }
}

那么徽标总是可见的。

【讨论】：

感谢您翻阅了代码并找到了这个。我一定会修改这个。然而，原来的问题仍然存在。幻象响应断点仍然存在于 992px 和 1008px 之间，它破坏的不仅仅是徽标。

【解决方案2】：

问题出在滚动条上。

1008px-992px=16px //the scrollbar dimension

实际上，如果将overflow: hidden 属性添加到HTML 标记中，一切都会正常工作。

您的媒体查询和 javascript 计算的宽度不同（一个有滚动条，另一个没有滚动条）。

Here a JSFiddle example 的问题。

调试网站，JS（缩小）和功能（它的一部分）是：

/prestashop/PRS01/PRS0100014/themes/cenzo/assets/js/theme.js

//.........FOLLOW THIS LINE............................................................................_____HERE______
u.default.responsive = u.default.responsive || {}, u.default.responsive.current_width = (0, s.default)(window).width(), u.default.responsive.min_width = 992, u.default.responsive.mobile = u.default.responsive.current_width < u.default.responsive.min_width, (0, s.default)(window).on("resize", function() {
    var e = u.default.responsive.current_width,
        t = u.default.responsive.min_width,
        n = (0, s.default)(window).width(),
        i = e >= t && n < t || e < t && n >= t;
    u.default.responsive.current_width = n, u.default.responsive.mobile = u.default.responsive.current_width < u.default.responsive.min_width, i && o()
}), (0, s.default)(document).ready(function() {
    u.default.responsive.mobile && o()
})

u.default.responsive.current_width 中视口为 1007 时，您可以看到 991

u.default.responsive.min_width 是 992

条件u.default.responsive.current_width < u.default.responsive.min_width 为真，触发remove node 函数。

为了调试这个，在 chrome 的“元素”选项卡上找到元素 ID top-menu 并设置 break on... node removal，检查堆栈你可以找到上面的函数和所有值。 chrome 的“Window Resizer”插件可以帮助你同时检查 Viewport 和 Window 大小。

您的解决方案有点复杂，因为 CMS 和/或框架很复杂。你可以用window.innerWidth 替换(window).width() 可能你解决了它，但我不知道主题的其余部分会发生什么。

但你可以在 stackoverflow 上找到一些解决方案：

CSS Media Queries and Firefox's Scrollbar Width

或这里

$(window).width() not the same as media query

希望对你有帮助:)

【讨论】：