Как отлаживать нежелательные отзывчивые точки останова?

В настоящее время я использую Bootstrap 4 alpha 4.

Я купил сайт, который начал изучать и модифицировать. У меня есть особенно странная проблема, которая, как я полагаю, должна быть связана с медиа-запросами. Оригинальные разработчики отказались исправлять проблему.

Когда я посещаю веб-сайт и изменяю размер ширины окна просмотра в любом месте между 992px и 1008px (обе части), часть веб-сайта исчезает, потому что эта чувствительная точка останова не определена в пределах установленных классов Bootstrap. Я тестировал это с помощью последних браузеров Chrome и FF.

Кто-нибудь знает, как я могу отладить эту вещь?

Я попытался найти значения 992 и 1008, а также +/- 1 в файлах CSS, но значение 1008 не найдено нигде (во всем проекте!) и 992 значение обычно используется в таблице стилей AFAIK.

Вы можете увидеть эту проблему здесь.. При изменении размера браузера между 992px и 1008px логотип исчезнет.

Ответы

Ответ 1

Проблема заключается в полосе прокрутки.

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

Фактически, если вы добавите свойство overflow: hidden в тег HTML, все будет работать правильно.

Ваш медиа-запрос и javascript не вычисляют одну и ту же ширину (одна с другой и без полосы прокрутки).

Здесь приведен пример JSFiddle проблемы.

Отладка сайта, JS (minified) и функция (ее часть):

/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 запущена.

Чтобы отладить это, на вкладке хром "Элементы" найдите идентификатор элемента top-menu и установите break on... node removal, проверив стек, вы можете найти функцию выше и все значения. Плагин "Window Resizer" для хрома поможет вам просмотреть размер видового экрана и окна.

Решение в вашем случае немного сложно, потому что CMS и/или Framework являются сложными. Вы можете заменить (window).width() на window.innerWidth, возможно, вы его разрешите, но я не знаю, что будет с остальной частью темы.

Но вы можете найти некоторые решения здесь в stackoverflow:

CSS-запросы и ширина полосы прокрутки Firefox

или здесь

$(window).width() не совпадает с медиа-запросом

Надеюсь, это поможет вам:)

Ответ 2

Похоже, что контейнер, в котором находится логотип, имеет максимальную ширину до величины SMALLER, чем минимальная ширина, необходимая для ее активации.

попробуйте изменить это (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;        
    }
}

Затем логотип всегда отображается.