Zapytania o media jQuery i CSS nie są zsynchronizowane

Question

Próbowałem zrozumieć sposób określania szerokości okna i zastanawiałem się, czy jest inaczej w CSS i jQuery.

Jeśli na przykład mam zapytania mediów CSS:

@media (max-width: 979px) { 
    /*my css here*/ 
} 

a także niektóre jQuery:

if ($(window).width() < 979) { 
    //my jQuery here 
} 

Spodziewam się, co następuje: - Gdy przeglądarka jest zmieniany & odświeżane na 980px , oba powyższe zostaną zignorowane: - Po zmianie rozmiaru przeglądarki & odświeżony przy 978px, oba powyższe zostaną aktywowane.

Jednak to, co znajduję, to to, że - jQuery i CSS nie kopiują się, aż do około 964 pikseli i mniej. - Czasami (jeśli mam włączone window.resize) jQuery i CSS kopią w oddzielnych szerokościach (kilka pikseli od siebie).

Czy ktoś może rzucić światło na to, co się tutaj dzieje?

Przy okazji opieram szerokość okna na przeglądarce układu Firebug.

Answer 1

Pomyśl może chcesz używać $(document).width() zamiast

$(window).width(); // returns width of browser viewport 
$(document).width(); // returns width of HTML document 

http://api.jquery.com/width/

Answer 2

media queries używać szerokość rzutni. Uważam, że uzyskanie szerokości html jest znacznie dokładniejsze przy próbie dopasowania do zapytań o media CSS. Korzystanie rozmiar:

$(window).resize(function() { 
    if ($('html').width() <= 979) { 
    // Do something 
    } 
}); 

Answer 3

problem jest związany z szerokością paska przewijania: window.innerWidth powróci właściwą wartość, która jest odczytywana przez CSS zapytaniami mediów. Zwróć uwagę, że $(window).innerWidth() zwróci nieprawidłową wartość.

rozwiązania cross-browser można wykorzystać funkcję tak:

function viewport() { 
    var e = window, a = 'inner'; 
    if (!('innerWidth' in window)) { 
     a = 'client'; 
     e = document.documentElement || document.body; 
    } 
    return { width : e[ a+'Width' ] , height : e[ a+'Height' ] }; 
} 

var value = viewport().width; 

Answer 4

Trochę off topic, ale zakładam, że starasz się naśladować kiedy pożary javascript, bo chcesz coś zrobić w w tym samym czasie, co przełączniki punktu dostępu css. Jeśli chcesz, aby javascript działał, gdy uruchomi się zapytanie o media, odkryłem, że najłatwiej jest sondować zmiany wprowadzone przez css, zamiast próbować naśladować sposób wywoływania zapytań o media (co jest niespójne w przeglądarkach z powodu raportowania szerokości pasków przewijania). Na przykład, jeżeli w swoim przerwania, element x idzie z position: relative do position: fixed, można zapewnić JavaScript jest zgodna z CSS, testując

if(elementX.css('position')== 'fixed'){ 
//code 
} 

zamiast odpytywania szerokość dokumentu.