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

Question

我当前正在使用bootstrap 4 alpha 4。

我已经购买了一个我开始学习和修改的网站。我有一个特别奇怪的问题，我认为必须以某种方式与媒体查询有关。原始开发人员拒绝解决该问题。

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

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

我已经尝试在CSS文件中搜索992和1008的值CC_1和CC_2以及/- 1afaik。

您可以在这里看到这个问题。当您调整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()
})

当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，检查堆栈，您可以在上面找到上面的功能和所有值。镀铬的"窗口恢复"插件可帮助您一起检查视口和窗口大小。

---

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

但是您可以在Stackoverflow上找到一些解决方案：

CSS媒体查询和Firefox的卷轴宽度

或这里

$（window）.width（）与媒体查询不同

希望这对您有帮助：）

Answer 2

看起来徽标所在的容器的最大>为了活跃。

尝试更改此此（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;        
    }
}

然后徽标总是可见的。