jQuery और सीएसएस मीडिया प्रश्न सिंक में नहीं

Question

मैं विंडो चौड़ाई निर्धारित करने के तरीके को समझने की कोशिश कर रहा हूं और मैं सोच रहा था कि यह सीएसएस और jQuery के लिए अलग है या नहीं।

उदाहरण के लिए मैं सीएसएस मीडिया क्वेरी है:

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

और भी कुछ jQuery:

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

मैं उम्मीद होती है निम्नलिखित: - जब ब्राउज़र & आकार दिया 980px में ताज़ा किया जाता है , उपर्युक्त दोनों को अनदेखा कर दिया जाएगा - जब ब्राउज़र का आकार & 978 पीएक्स पर रीफ्रेश किया गया है, तो उपरोक्त दोनों सक्रिय होंगे।

हालांकि मुझे जो मिल रहा है वह यह है कि - jQuery और CSS 964px और नीचे तक नहीं लाते हैं। - कभी-कभी (अगर मेरे पास window.resize सक्षम है) jQuery और सीएसएस किक अलग चौड़ाई (कुछ पिक्सल अलग) पर लातें।

क्या कोई यहां क्या हो रहा है इस पर कोई प्रकाश डाल सकता है?

जिस तरह से मैं फायरबग के लेआउट व्यूअर पर विंडो चौड़ाई का आधार बना रहा हूं।

Answer 1

लगता है कि तुम का उपयोग करने के $(document).width() बजाय

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

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

Answer 2

मीडिया प्रश्नों व्यूपोर्ट चौड़ाई का उपयोग कर सकते हैं। मुझे लगता है कि सीएसएस मीडिया प्रश्नों के साथ मिलान करने का प्रयास करते समय एचटीएमएल चौड़ाई प्राप्त करना अधिक सटीक है। आकार बदलने का उपयोग करना:

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

Answer 3

समस्या स्क्रॉलबार चौड़ाई से संबंधित है: window.innerWidth सही मूल्य कि CSS मीडिया क्वेरी द्वारा पढ़ा जाता है वापस आ जाएगी। ध्यान दें कि $(window).innerWidth() गलत मान वापस करेगा।

एक क्रॉस-ब्राउज़र समाधान के लिए इस तरह एक समारोह के लिए इस्तेमाल किया जा सकता है:

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

विषय बंद थोड़ा, लेकिन मैं आपको नकल करने के लिए जब जावास्क्रिप्ट आग क्योंकि आप पर कुछ करना चाहता हूँ की कोशिश कर रहे मान सीएसएस ब्रेकपॉइंट स्विच के साथ ही एक ही समय। यदि आप मीडिया क्वेरी को आग लगने पर जावास्क्रिप्ट कुछ करना चाहते हैं, तो मुझे पता चला है कि सीएसएस द्वारा बनाए गए बदलाव के लिए चुनाव करना सबसे आसान है, मीडिया पूछताछ के तरीके की नकल करने की कोशिश करने की बजाय, जो रिपोर्टिंग के कारण ब्राउज़र में असंगत है स्क्रॉलबार चौड़ाई के)। उदाहरण यदि आपका ब्रेकप्वाइंट पर, तत्व-x position: fixed करने के लिए position: relative से चला जाता है के लिए, आप सुनिश्चित कर सकते हैं अपने जावास्क्रिप्ट मतदान से

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

परीक्षण बल्कि दस्तावेज़ चौड़ाई के आधार पर आपके सीएसएस के साथ कतार में है।