$ (विंडो)। उपलब्धता () मीडिया क्वेरी के समान नहीं है

186

मैं एक परियोजना पर ट्विटर बूटस्ट्रैप का उपयोग कर रहा हूं। डिफॉल्ट बूटस्ट्रैप शैलियों के साथ-साथ मैंने अपने खुद के कुछ भी जोड़े हैं

//My styles
@media (max-width: 767px)
{
    //CSS here
}

व्यूपोर्ट की चौड़ाई 767px कम होने पर मैं पृष्ठ पर कुछ तत्वों के क्रम को बदलने के लिए jQuery का उपयोग कर रहा हूं। 

$(document).load($(window).bind("resize", checkPosition));

function checkPosition()
{
    if($(window).width() < 767)
    {
        $("#body-container .main-content").remove().insertBefore($("#body-container .left-sidebar"));
    } else {
        $("#body-container .main-content").remove().insertAfter($("#body-container .left-sidebar"));
    }
}

मुझे जो समस्या हो रही है वह यह है कि $(window).width()सीएसएस द्वारा गणना की गई चौड़ाई और चौड़ाई की गणना एक जैसी नहीं लगती है। जब $(window).width()767 वापस आता है तो सीएसएस इसे 751 के रूप में व्यूपोर्ट की चौड़ाई की गणना करता है, इसलिए 16px अलग लगता है।

क्या किसी को पता है कि यह क्या कारण है और मैं समस्या को कैसे हल कर सकता हूं? लोगों ने सुझाव दिया है कि स्क्रॉलबार की चौड़ाई पर विचार नहीं किया जा रहा है और इसका उपयोग करने $(window).innerWidth() < 751का तरीका है। हालांकि आदर्श रूप से मैं एक समाधान खोजना चाहता हूं जो स्क्रॉलबार की चौड़ाई की गणना करता है और जो मेरी मीडिया क्वेरी के साथ संगत है (उदाहरण के लिए जहां दोनों स्थितियां मूल्य 767 ​​के खिलाफ जांच कर रही हैं)। क्योंकि निश्चित रूप से सभी ब्राउज़रों की स्क्रॉलबार चौड़ाई 16px नहीं होगी?

jquery  css  twitter-bootstrap  media-queries 
— Pattle
स्रोत
1
अगर ($ ('html') चौड़ाई () <= 767) {// कुछ करें}
— Vaibs_Cool
@Vaibs_Cool सुझाव के लिए धन्यवाद, लेकिन मुझे अभी भी एक ही परिणाम मिलता है
— मवेशी
— २०:२०
उत्तर यहाँ मैं [यहाँ लिंक विवरण दर्ज करें] [1] [१]: stackoverflow.com/questions/11309859/…
— रेंटीव
क्या "document.documentElement.clientWidth" (इसके बजाय "$ (विंडो) .ग्रेशन) ()") काम करता है कि आप इसे कैसे काम करना चाहते हैं? संपादित करें: मेरी गलती, बस Vaibs_Cool का उत्तर देखा।
— जोशंट

जवाबों:

293

यदि आपको IE9 का समर्थन करने की आवश्यकता नहीं है, तो आप बस window.matchMedia()( MDN प्रलेखन ) का उपयोग कर सकते हैं ।

function checkPosition() {
    if (window.matchMedia('(max-width: 767px)').matches) {
        //...
    } else {
        //...
    }
}

window.matchMediaपूरी तरह से सीएसएस मीडिया प्रश्नों के साथ संगत है और ब्राउज़र समर्थन काफी अच्छा है: http://caniuse.com/#feat=matchmedia

अपडेट करें:

यदि आपको अधिक ब्राउज़रों का समर्थन करना है, तो आप मॉर्डनिजर के mq पद्धति का उपयोग कर सकते हैं , यह उन सभी ब्राउज़रों का समर्थन करता है जो CSS में मीडिया के प्रश्नों को समझते हैं।

if (Modernizr.mq('(max-width: 767px)')) {
    //...
} else {
    //...
}
— ausi
स्रोत
8
यदि आप माडर्निज़्र लाइब्रेरी का उपयोग करने का जोखिम उठा सकते हैं, तो यह वहां से सबसे अच्छा जवाब है।
— अमीर
1
यह समाधान बेहतर है: stackoverflow.com/a/19292035/1136132 (दूसरा कोड)। केवल जे.एस.
— joseantgv
@joseantgv मेरा समाधान भी js-only है। क्या आप बता सकते हैं कि आपके द्वारा जुड़ा समाधान बेहतर क्यों है?
— मौसी
2
@ हेडवर्ड Modernizr.mqकेवल एक बूलियन मान लौटाता है, इसलिए आपको इसे onresizeइवेंट हैंडलर में खुद को कॉल करना होगा ।
— मौसी
2
@Bernig window.matchMediaअनुशंसित तरीका है, क्योंकि यह एक reflow को ट्रिगर नहीं करता है, यह इस बात पर निर्भर करता है कि आप कितनी बार फ़ंक्शन को कॉल करते हैं यह एक प्रदर्शन समस्या पैदा कर सकता है। यदि आप सीधे माडर्निज़र का उपयोग नहीं करना चाहते हैं, तो आप स्रोत कोड को src / mq.js और src / injectElementWithStyles.js से कॉपी कर सकते हैं ।
— मौसी
175

एक सीएसएस नियम की जाँच करें जो मीडिया क्वेरी बदलता है। यह हमेशा काम करने की गारंटी है।

http://www.fourfront.us/blog/jquery-window-width-and-media-queries

HTML:

<body>
    ...
    <div id="mobile-indicator"></div>
</body>

जावास्क्रिप्ट:

function isMobileWidth() {
    return $('#mobile-indicator').is(':visible');
}

सीएसएस:

#mobile-indicator {
    display: none;
}

@media (max-width: 767px) {
    #mobile-indicator {
        display: block;
    }
}
— नितंब
स्रोत
9
जेएस हैक का अन्य उत्तरों में उल्लेखित की तुलना में यह अधिक सुरुचिपूर्ण समाधान है।
— रेने रोथ
3
+1 यह सिर्फ चालाक है। मुझे पसंद है कि यदि आप ब्रेकपॉइंट्स को बदलना चाहते हैं, तो आपको सीएसएस को बदलना होगा और जावास्क्रिप्ट को नहीं।
— जोमो १
यह समाधान ठीक काम करता है और मुझे यह सबसे अधिक वोट वाले उत्तर में प्रस्तावित जावास्क्रिप्ट हैक की तुलना में अधिक सुरुचिपूर्ण लगता है।
— एंड्रेस मेजा-एस्केलॉन
2
आप बूटस्ट्रैप का उपयोग करते हैं आप की तरह सीएसएस के बिना यह कर सकते हैं<div id="xs-indicator" class="xs-visible">
— Camo
33

इसके कारण हो सकता है scrollbar, जैसे की innerWidthबजाय उपयोग करेंwidth

if($(window).innerWidth() <= 751) {
   $("#body-container .main-content").remove()
                                .insertBefore($("#body-container .left-sidebar"));
} else {
   $("#body-container .main-content").remove()
                                .insertAfter($("#body-container .left-sidebar"));
}

इसके अलावा आप इस viewportतरह प्राप्त कर सकते हैं

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' ] };
}

कोड स्रोत के ऊपर

— रोहन कुमार
स्रोत
धन्यवाद। यह काम करेगा, लेकिन वैसे भी मैं स्क्रॉल पट्टी की चौड़ाई को शामिल करने के लिए jquery का उपयोग कर सकता हूं। मैं बस सोच रहा हूं कि स्क्रॉलबार की चौड़ाई विभिन्न ब्राउज़रों पर बदल सकती है?
— मोती
1
हाँ का उपयोग करें innerWidth()या आप इसका उपयोग कर सकते हैं जैसे यह $('body').innerWidth();देखें stackoverflow.com/questions/8339377/…
— रोहन कुमार
3
आपका मतलब window.innerWidth है, jQuery $ (विंडो) ऑब्जेक्ट, $ (विंडो)। उपलब्धता () पर इसे गलत तरीके से नहीं लौटाता है
— EJanuszewski
1
window.innerWidthसफारी 8 में सीएसएस मीडिया के प्रश्नों के अनुरूप नहीं है अगर ओएसबीएक्स सिस्टम वरीयताओं में स्क्रॉलबार सक्षम हैं।
— मौसी
4

यह शायद दस्तावेज़ की चौड़ाई को JS- स्कोप न करने के लिए एक बेहतर अभ्यास है, लेकिन css @media क्वेरी द्वारा किए गए कुछ प्रकार के परिवर्तन। इस पद्धति के साथ आप सुनिश्चित कर सकते हैं कि JQuery फ़ंक्शन और सीएसएस परिवर्तन एक ही समय में होता है।

सीएसएस:

#isthin {
    display: inline-block;
    content: '';
    width: 1px;
    height: 1px;
    overflow: hidden;
}

@media only screen and (max-width: 990px) {
    #isthin {
        display: none;
    }
}

jQuery:

$(window).ready(function(){
    isntMobile = $('#isthin').is(":visible");
    ...
});

$(window).resize(function(){
    isntMobile = $('#isthin').is(":visible");
    ...
});
— gramgram
स्रोत
3

मैं हाल ही में एक ही समस्या का सामना कर रहा था - बूटस्ट्रैप 3 के साथ भी।

न तो $ .net () और न ही $ .innerWidth () आपके लिए काम करेंगे।

सबसे अच्छा समाधान मैं के साथ आया था - और विशेष रूप से BS3 के अनुकूल बनाया गया -
करने के लिए है एक की चौड़ाई जाँच .containerतत्व।

जैसा कि आप शायद जानते हैं कि .containerतत्व कैसे काम करता है,
यह एकमात्र तत्व है जो आपको बीएस सीएसएस नियमों द्वारा निर्धारित वर्तमान चौड़ाई देगा।

तो ऐसा कुछ हो जाता है

bsContainerWidth = $("body").find('.container').width()
if (bsContainerWidth <= 768)
    console.log("mobile");
else if (bsContainerWidth <= 950)
    console.log("small");
else if (bsContainerWidth <= 1170)
    console.log("medium");
else
    console.log("large");
— user3041539
स्रोत
3

यहां पहले वर्णित विधियों का एक विकल्प है जो सीएसएस के माध्यम से कुछ को बदलने और जावास्क्रिप्ट के माध्यम से इसे पढ़ने पर भरोसा करते हैं। इस विधि की जरूरत नहीं है window.matchMediaया आधुनिकीकरण नहीं है। इसे अतिरिक्त HTML तत्व की भी आवश्यकता नहीं है। यह एक HTML छद्म तत्व का उपयोग करके 'स्टोर' ब्रेकपॉइंट जानकारी को काम करता है:

body:after {
  visibility: hidden;
  height: 0;
  font-size: 0;
}

@media (min-width: 20em) {
  body:after {
    content: "mobile";
  }
}

@media (min-width: 48em) {
  body:after {
    content: "tablet";
  }
}

@media (min-width: 64em) {
  body:after {
    content: "desktop";
  }
}

मैंने bodyएक उदाहरण के रूप में उपयोग किया , आप इसके लिए किसी भी HTML तत्व का उपयोग कर सकते हैं। आप किसी भी स्ट्रिंग या संख्या को जोड़ सकते हैं जिसे आप contentछद्म तत्व में चाहते हैं। 'मोबाइल' आदि नहीं होना चाहिए।

अब हम जावास्क्रिप्ट से इस जानकारी को निम्नलिखित तरीके से पढ़ सकते हैं:

var breakpoint = window.getComputedStyle(document.querySelector('body'), ':after').getPropertyValue('content').replace(/"/g,'');

if (breakpoint === 'mobile') {
    doSomething();
}

इस तरह हम हमेशा सुनिश्चित करते हैं कि ब्रेकपॉइंट जानकारी सही है, क्योंकि यह सीधे सीएसएस से आ रहा है और हमें जावास्क्रिप्ट के माध्यम से सही स्क्रीन-चौड़ाई प्राप्त करने में परेशानी नहीं होती है।

— dschenk
स्रोत
आप का उपयोग करने की जरूरत नहीं querySelector()या getPropertyValue()। आप एकल उद्धरण के लिए भी regex में देख सकते हैं (क्योंकि यह सुसंगत नहीं है)। यह: window.getComputedStyle(document.body, ':after').content.replace(/"|'/g, '')। और, इसे थोड़ा कम खर्चीला बनाने के लिए, आप इसे ._debounce()~ 100ms प्रतीक्षा के साथ अंडरस्कोर / लॉश में लपेट सकते हैं । अंत में, <html> के लिए अटारी को जोड़ने से अन्य चीजों के लिए आउटपुट उपलब्ध होता है जैसे कि टूलटिप अक्षम खंडों में कच्चे झंडे / डेटा की तलाश करना। उदाहरण: gist.github.com/dhaupin/f01cd87873092f4fe2fb8d802f9514b1
— dhaupin
2

जावास्क्रिप्ट व्यूपोर्ट की चौड़ाई की जांच करने के लिए एक से अधिक विधि प्रदान करता है। जैसा कि आपने देखा, भीतर की चौड़ाई में टूलबार की चौड़ाई शामिल नहीं है, और टूलबार की चौड़ाई पूरे सिस्टम में भिन्न होगी। वहाँ भी बाहरी विकल्प है, जिसमें टूलबार चौड़ाई शामिल होगी। मोज़िला Javascript API कहता है:

Window.outerWidth को ब्राउज़र विंडो के बाहर की चौड़ाई मिलती है। यह साइडबार (यदि विस्तारित किया गया है), विंडो क्रोम और विंडो को आकार देने वाली सीमाओं / हैंडल सहित पूरे ब्राउज़र विंडो की चौड़ाई का प्रतिनिधित्व करता है।

जावास्क्रिप्ट की स्थिति ऐसी है कि हर प्लेटफॉर्म पर प्रत्येक ब्राउज़र में बाहरीविद्या के लिए एक विशिष्ट अर्थ पर भरोसा नहीं किया जा सकता है।

outerWidthहै अच्छी तरह से समर्थित नहीं पुराने मोबाइल ब्राउज़र है, हालांकि यह और सबसे नए स्मार्ट फोन ब्राउज़रों प्रमुख डेस्कटॉप ब्राउज़र भर में समर्थन प्राप्त है।

जैसा कि ausi ने बताया है, matchMediaयह एक बढ़िया विकल्प होगा क्योंकि CSS बेहतर मानकीकृत है (मिलान द्वारा सीएसएस द्वारा देखे गए व्यूपोर्ट वैल्यू को पढ़ने के लिए मैचमीडिया जेएस का उपयोग करता है)। लेकिन स्वीकृत मानकों के साथ भी, मंदबुद्धि ब्राउज़र अभी भी मौजूद हैं जो उन्हें अनदेखा करते हैं (IE <10 इस मामले में, जो मैचमीडिया को कम से कम तब तक उपयोगी नहीं बनाता है जब तक कि XP ​​की मृत्यु नहीं हो जाती)।

में सारांश , यदि आप केवल डेस्कटॉप ब्राउज़र और नए मोबाइल ब्राउज़र के लिए विकसित कर रहे हैं, outerWidth आप देना चाहिए कि आप क्या देख रहे हैं, के साथ कुछ चेतावनियां ।

— fzzylogic
स्रोत
1

मीडिया प्रश्नों से निपटने के लिए यहां एक कम सम्मिलित चाल है। क्रॉस ब्राउज़र समर्थन थोड़ा सीमित है क्योंकि यह मोबाइल IE का समर्थन नहीं करता है।

     if (window.matchMedia('(max-width: 694px)').matches)
    {
        //do desired changes
    }

देखें मोज़िला प्रलेखन अधिक जानकारी के लिए।

— user2128205
स्रोत
1

इसे इस्तेमाल करे 

getData(){
    if(window.innerWidth <= 768) {
      alert('mobile view')
      return;
    }

   //else function will work

    let body= {
      "key" : 'keyValue'
    }
    this.dataService.getData(body).subscribe(
      (data: any) => {
        this.myData = data
      }
    )
}
— दिनेश अधकारी
स्रोत
0

वर्कअराउंड जो हमेशा काम करता है और सीएसएस मीडिया प्रश्नों के साथ समन्वयित होता है।

शरीर में एक div जोड़ें

<body>
    ...
    <div class='check-media'></div>
    ...
</body>

शैली जोड़ें और उन्हें विशिष्ट मीडिया क्वेरी में दर्ज करके बदलें

.check-media{
    display:none;
    width:0;
}
@media screen and (max-width: 768px) {
    .check-media{
         width:768px;
    }
    ...
}

फिर JS चेक स्टाइल में जिसे आप मीडिया क्वेरी में दर्ज करके बदल रहे हैं

if($('.check-media').width() == 768){
    console.log('You are in (max-width: 768px)');
}else{
    console.log('You are out of (max-width: 768px)');
}

इसलिए आमतौर पर आप किसी भी शैली की जांच कर सकते हैं जिसे विशिष्ट मीडिया क्वेरी में दर्ज करके बदला जा रहा है।

— आर्सेन प्यूस्कीकुलन
स्रोत
0

आधुनिक क्रॉस-ब्राउज़र समाधान का उपयोग करना है

लिंक: https://modernizr.com/docs/#mq

यदि वर्तमान ब्राउज़र विंडो स्थिति मीडिया क्वेरी से मेल खाती है, तो Modernizr.mq आपको प्रोग्रामेटिक रूप से जांचने की अनुमति देता है।

var query = Modernizr.mq('(min-width: 900px)');
if (query) {
   // the browser window is larger than 900px
}

नोट ब्राउज़र मीडिया के प्रश्नों का समर्थन नहीं करता (जैसे पुराना IE) mq हमेशा गलत लौटेगा।

— संजीब देबनाथ
स्रोत
0 
if(window.matchMedia('(max-width: 768px)').matches)
    {
        $(".article-item").text(function(i, text) {

            if (text.length >= 150) {
                text = text.substring(0, 250);
                var lastIndex = text.lastIndexOf(" ");     
                text = text.substring(0, lastIndex) + '...'; 
            }

            $(this).text(text);

        });

    }
— एडम कोल्टन
स्रोत
0

मैं क्या करूं ;

<body>
<script>
function getWidth(){
return Math.max(document.body.scrollWidth,
document.documentElement.scrollWidth,
document.body.offsetWidth,
document.documentElement.offsetWidth,
document.documentElement.clientWidth);
}
var aWidth=getWidth();
</script>
...

और कहीं भी बाद में चर चर कहते हैं।

आपको अपने दस्तावेज़ निकाय में getWidth () को यह सुनिश्चित करने की आवश्यकता है कि स्क्रॉलबार की चौड़ाई को गिना जाए, और getWidth () से घटाए गए ब्राउज़र की स्क्रॉलबार चौड़ाई।

— burkul
स्रोत
-1

कार्यान्वयन स्लाइडर पर क्लिक करें और रिज़ॉल्यूशन के आधार पर ब्लॉक में स्लाइड के विभिन्न नंबरों को प्रदर्शित करें (jQuery)

   if(window.matchMedia('(max-width: 768px)').matches) {
      $('.view-id-hot_products .view-content').slick({
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 3,
        dots: true,
      });
    }

    if(window.matchMedia('(max-width: 1024px)').matches) {
      $('.view-id-hot_products .view-content').slick({
        infinite: true,
        slidesToShow: 4,
        slidesToScroll: 4,
        dots: true,
      });
    }
— विटाली
स्रोत
-2

इसे इस्तेमाल करे 

if (document.documentElement.clientWidth < 767) {
   // scripts
}

अधिक संदर्भ के लिए यहां क्लिक करें

— Vaibs_Cool
स्रोत
धन्यवाद, इसका अभी भी एक ही परिणाम है
— मवेशी
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.