Jak debugować niechciane responsywne punkty przerwania?

Question

Aktualnie używam Bootstrap 4 alfa 4.

Kupiłem stronę, którą zacząłem studiować i modyfikować. Mam szczególnie dziwny problem, który jak sądzę musi być związany z zapytaniami o media. Oryginalni deweloperzy odmówili rozwiązania problemu.

Gdy odwiedzam stronę internetową i zmieniam szerokość widocznego obszaru w dowolnym miejscu między 992px a 1008px (w obu przypadkach), części witryny znikają, ponieważ ten responsywny punkt przerwania nie jest zdefiniowany w ramach ustalonych klas Bootstrap. Testowałem to z najnowszymi przeglądarkami Chrome i FF.

Czy ktoś ma pojęcia, jak mogę to debugować?

Próbowałem poszukiwaniu wartości 992 i 1008 jak +/- 1 w plikach CSS, ale wartości 1008 nie jest nigdzie (w całym projekcie!), A wartość 992 jest używany zazwyczaj w obrębie Arkusz stylów AFAIK.

Możesz zobaczyć ten numer live here. Podczas zmiany szerokości przeglądarki między 992px a 1008px logo zniknie.

Answer 1

Problem stanowi pasek przewijania.

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

W rzeczywistości, jeśli dodać właściwość overflow: hidden do znacznika HTML, wszystko działa poprawnie.

Twoje zapytanie o media i javascript nie obliczają tej samej szerokości (jedna z, a druga bez paska przewijania).

Here a JSFiddle example problemu.

debugowanie strony, JS (minified) i funkcja (jej część) wynosi:

/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() 
}) 

Gdy rzutnia jest 1007 w u.default.responsive.current_width można zobaczyć 991

u.default.responsive.min_width jest 992

Warunek u.default.responsive.current_width < u.default.responsive.min_width jest prawdziwy i funkcja remove node jest uruchomiona.

do debugowania to zakładka, na chromie „Elements” znajdź id elementu top-menu i ustawić break on... node removal, sprawdzanie stosu można znaleźć funkcję powyżej i wszystkie wartości. Wtyczka "Okno Resizer" dla chrome pomaga ci razem sprawdzić rozmiar Rzutni i okna.

---

rozwiązanie w Twoim przypadku jest trochę skomplikowane, ponieważ CMS i/lub ramowa są złożone. Możesz zastąpić (window).width() prawdopodobnie, ale nie mogę się dowiedzieć, co stanie się z resztą motywu.

Ale można znaleźć kilka rozwiązań tutaj na stackoverflow:

CSS Media Queries and Firefox's Scrollbar Width

lub tutaj

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

nadzieję, że to pomoże Ci :)

Answer 2

Wygląda na pojemniku, w którym znajduje się logo ma maksymalna szerokość do ilości SMALLER od minimalnej wymaganej szerokości na to, aby być aktywnym.

spróbuj zmienić ten (theme.css, wiersz 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;   
    } 
} 

do tego:

@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;   
    } 
} 

Następnie logo jest zawsze widoczne.