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

Question

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

我已经买了一个我开始研究和修改的网站.我有一个特别奇怪的问题,我认为必须以某种方式与媒体查询相关.原始开发者拒绝解决这个问题.

当我访问网站并将视口宽度调整到992px和1008px之间的任何地方(两者都包含)时,网站部分会消失,因为此响应断点未在已建立的Bootstrap类中定义.我已经使用最新的Chrome和FF浏览器进行了测试.

有没有人知道如何调试这个东西？

我试图寻找值992和1008以及+/- 1的CSS文件,但该1008值未找到任何地方(在整个项目!)和992值正在样式表AFAIK内正常使用.

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

Answer 1

问题是滚动条。

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

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

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

这是一个 JSFiddle问题的示例。

调试站点，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()
})

当视口为1007时u.default.responsive.current_width你可以看到991

u.default.responsive.min_width是 992

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

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

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

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

CSS 媒体查询和 Firefox 的滚动条宽度

或这里

$(window).width() 与媒体查询不同

希望这对您有帮助:)