jQuery खिड़की चौड़ाई सीएसएस की खिड़की के बराबर नहीं चौड़ाई

Question

मैं सीएसएस और जे एस कोड की निम्न दो टुकड़े का उपयोग कर रहा:

@media (max-width: 720px) { 
    // a code to make arrows in a carousel disappear 
} 

if(jQuery(window).width() <= 720){ 
    // a code to make arrows in the carousel stop working 
} 

उन लोगों के साथ समस्या यह है कि वास्तव में चौड़ाई = 738px और नहीं 720px पर बाद कार्यान्वित । मुझे संदेह है कि यह ब्राउज़र के लंबवत स्क्रॉलबार की वजह से है जिसमें क्रोम में 18px के बराबर चौड़ाई है।

क्या इसे एकीकृत करने का कोई तरीका है? स्क्रॉलबार की चौड़ाई के बावजूद मैं सभी कार्यों में एक ही पल में ये क्रियाएं करना चाहूंगा।

टेस्ट (ब्राउज़र है जब @ 720px और सीएसएस पहले से ही मार डाला गया है):

jQuery(document).innerWidth() = 703 
jQuery(window).innerWidth() = 703 
jQuery(document).width() = 703 
jQuery(window).width() = 703 
jQuery('body').width() = 703 
jQuery('html').width() = 703 

Answer 1

मैं एक ही समस्या थोड़ी देर से निपटने के लिए किया था पहले, और अब तक का सबसे सही समाधान मीडिया क्यू का उपयोग करना है वास्तविक विंडो आकार को जावास्क्रिप्ट में पास करने के लिए यूरीज़। उस तत्व की max-width संपत्ति को बदलने के लिए

उपयोग मीडिया क्वेरी,

वापस पढ़ें जावास्क्रिप्ट के माध्यम से उस तत्व की max-width संपत्ति

• अपने पृष्ठ के लिए एक छिपा तत्व जोड़ें,: आप इन चरणों का पालन करने के लिए है।

उदाहरण के लिए, अपने पृष्ठ के लिए निम्न तत्व जोड़:

<div id="currentMedia"></div> 

तो निम्नलिखित सीएसएस नियम लिखें:

#currentMedia { 
    display: none; 
} 

@media (max-width: 720px) { 
    /* Make arrows in the carousel disappear... */ 

    #currentMedia { 
     max-width: 720px; 
    } 
} 

फिर, जावास्क्रिप्ट की ओर से, आप लिख सकते हैं:

if (parseInt(jQuery("#currentMedia").css("max-width"), 10) <= 720) { 
    // Make arrows in the carousel stop working... 
} 

और यह स्क्रॉल के बावजूद सटीक होगा बार आकार, चूंकि मान उसी मीडिया क्वेरी से आता है जो कैरोसेल के लापता होने को ट्रिगर करता है।

मैं सभी प्रमुख हाल ब्राउज़रों पर इस समाधान का परीक्षण किया है, और यह सही परिणाम देता है।

Answer 2

आप क्या गुण क्या on this page on quirksmode.org ब्राउज़र पर समर्थित हैं के बड़े सारांश मिल जाएगा।

आपकी सबसे अच्छी शर्त शायद पृष्ठ में एक तत्व को पकड़ने के लिए है (दस्तावेज़ का उपयोग करके जहां समर्थित है, या document.getElementById या जो कुछ भी हो), अपने ऑफसेट पर जाएं शीर्ष तत्व को खोजने के लिए पैरेंट श्रृंखला, फिर उस तत्व के क्लाइंट की जांच करें और क्लाइंट हाइट।

innerWidth प्रलेखन

innerWidth() कहते हैं इस विधि window और document वस्तुओं पर लागू नहीं है; इन के लिए, .width का उपयोग()

अपने कोड में कोशिश

How can I get the browser's scrollbar sizes?

से Alexandre Gomes Blog

function getScrollBarWidth() { 
    var inner = document.createElement('p'); 
    inner.style.width = "100%"; 
    inner.style.height = "200px"; 

    var outer = document.createElement('div'); 
    outer.style.position = "absolute"; 
    outer.style.top = "0px"; 
    outer.style.left = "0px"; 
    outer.style.visibility = "hidden"; 
    outer.style.width = "200px"; 
    outer.style.height = "150px"; 
    outer.style.overflow = "hidden"; 
    outer.appendChild (inner); 

    document.body.appendChild (outer); 
    var w1 = inner.offsetWidth; 
    outer.style.overflow = 'scroll'; 
    var w2 = inner.offsetWidth; 
    if (w1 == w2) w2 = outer.clientWidth; 

    document.body.removeChild (outer); 

    return (w1 - w2); 
}; 

if(jQuery(window).width()-getScrollBarWidth(); <= 720){ 
    // a code to make arrows in the carousel stop working 
} 

Answer 3

आप बूटस्ट्रैप> 3 का उपयोग कर रहे हैं तो मैं आपको कुछ सुझाव देगा।

अपने Css और पूर्वनिर्धारित में .container वर्ग के साथ बूटस्ट्रैप जहाज। और यह @media प्रश्नों के साथ बदल रहा है। इसलिए इसके लिए मेरा कामकाजी कोड नमूना नीचे है।

function detectWidth(){ 
    var width = $('.container').eq(0).outerWidth() ; 
    console.log(width); 
    if(width<750){ 
    // do something for XS element 
    }else if(width>=750 && width<970){ 
    // do something for SM element 
    }else if(width>=970 && width<1170){ 
     // do something for MD element 
    }else{ 
    // do something for LG element 
    } 

}

Answer 4

मुझे पता है यह एक पुराने धागा है, लेकिन मुझे लगता है कि यह अभी भी इस जवाब से फायदा हो सकता।

var width = window.outerWidth; 

यह आपको स्क्रॉलबार सहित खिड़की है, जो मीडिया क्वेरी क्या उपयोग की चौड़ाई दे देंगे, मेरा मानना ​​है।

Answer 5

एक पुराना धागा सा, लेकिन मैं `innerWidth() के लिए इस समाधान

function getWidth(){ 
    return ((window.innerWidth > 0) ? window.innerWidth : screen.width); 
}