अगर स्क्रीन की चौड़ाई 960 पीएक्स से कम है तो कुछ करें

Question

अगर मेरी स्क्रीन की चौड़ाई 960 पिक्सेल से कम है तो मैं jQuery कैसे बना सकता हूँ? नीचे दिया गया कोड हमेशा 2 चेतावनी देता है, चाहे मेरी खिड़की का आकार कुछ भी हो:

if (screen.width < 960) {
    alert('Less than 960');
}
else {

    alert('More than 960');
}

Comments

क्या आप ऐसा तब कर रहे हैं जब आप ब्राउज़र का आकार बदलने पर पृष्ठ लोड कर रहे हैं या यह है। इसका हमेशा एक अच्छा विचार है कि अलर्ट (स्क्रीन.वॉक) को यह देखने के लिए कहा जाए कि व्हाट्सएप का उपयोग निर्णय लेने के लिए किया गया है।

— फर्रुख सुभानी

मीडिया के सवाल क्यों नहीं ?

— bzlm

मीडिया के सवाल क्यों नहीं? मैं किसी भी मामले के बारे में सोच सकता हूं, जहां मीडिया के प्रश्नों का कोई मतलब नहीं होगा। अगर jdln jQuery का उपयोग करना चाहता है, तो मान लें कि उसके पास ऐसा करने का अच्छा कारण है।

— ल्यूक

इसके लिए उपयोगों का भार है जहां मीडिया प्रश्न काम नहीं करता है, जैसे कि चिनाई प्रभाव को सक्रिय करने के लिए यदि स्क्रीन की चौड़ाई 1000 पिक्सल से अधिक हो, तो।

— पक्के

Answer 1

विंडो की चौड़ाई प्राप्त करने के लिए jQuery का उपयोग करें।

if ($(window).width() < 960) {
   alert('Less than 960');
}
else {
   alert('More than 960');
}

Comments

ध्यान दें कि स्क्रॉलबार दिखाई देने पर $ (विंडो)। रिचार्ज () ब्राउज़रों के अनुरूप नहीं है। मैंने पाया है कि जावास्क्रिप्ट मीडिया प्रश्नों का उपयोग करना अधिक विश्वसनीय है।

— forsvunnet

@forsvunnet यह लिंक मृत है।

— शाह अबज़ खान

जावास्क्रिप्ट मीडिया के प्रश्नों की एक कड़ी: w3schools.com/howto/howto_js_media_queries.asp

— तिमार इवो बैटिस

Answer 2

आप इसे आकार परिवर्तन के साथ जोड़ना चाह सकते हैं:

 $(window).resize(function() {
  if ($(window).width() < 960) {
     alert('Less than 960');
  }
 else {
    alert('More than 960');
 }
});

आरजे के लिए:

var eventFired = 0;

if ($(window).width() < 960) {
    alert('Less than 960');

}
else {
    alert('More than 960');
    eventFired = 1;
}

$(window).on('resize', function() {
    if (!eventFired) {
        if ($(window).width() < 960) {
            alert('Less than 960 resize');
        } else {
            alert('More than 960 resize');
        }
    }
});

मैंने कोई सफलता के साथ http://api.jquery.com/off/ की कोशिश की, इसलिए मैं इवेंट फ़्लैग फ़्लैग के साथ गया।

Comments

आकार बदलने की घटना में लपेटने से यह केवल आकार में आग बन जाता है, लोड पर नहीं।

— टेड

@ टेड इसलिए मैंने कहा है combine it with।

— जे.के.

@RJ ऊपर संपादन देखें। मुझे नहीं पता कि आप एक घटना को 'स्पष्ट' से क्या मतलब है इसलिए मैं फिर से घटना को रोकने के लिए चला गया।

— जे.के.

शानदार, मैं दिनों के लिए यह पता लगाने की कोशिश कर रहा हूं कि कैसे एक equalHeightsसमारोह को आकार में बांधने के लिए लेकिन केवल 768 से अधिक चौड़ाई के लिए। यह एक आकर्षण की तरह काम करता है। धन्यवाद

— डैनी इंग्लैंड

यह उस कोड के बाद एक आकार बदलने वाली घटना को जोड़ने के लिए समझ में आता है, ताकि जो कुछ भी ब्राउज़र के वर्तमान आकार को लोड करता है, वह तब आवश्यक कोड

— चलाएगा

Answer 3

मैं ऐसी चीज़ के लिए jQuery का उपयोग नहीं करने और इसके साथ आगे बढ़ने की सलाह देता हूं window.innerWidth:

if (window.innerWidth < 960) {
    doSomething();
}

Comments

क्यों बेहतर jQuery का उपयोग करने के लिए नहीं?

— अस्तित्व के प्रति

@raison मुझे लगता है कि $ (विंडो)। रिचार्ज () में स्क्रॉल बार शामिल नहीं होंगे - इसलिए यदि आपके पास 960px का एक सेक्रीन है, तो यह 944px वापस आ जाएगा और आपके जेएस के अनुसार आग नहीं लगेगी। यह समाधान 960px

— शॉन टी

Answer 4

आप जावास्क्रिप्ट के साथ मीडिया क्वेरी का उपयोग भी कर सकते हैं।

const mq = window.matchMedia( "(min-width: 960px)" );

if (mq.matches) {
       alert("window width >= 960px");
} else {
     alert("window width < 960px");
}

Answer 5

मैं सुझाव दूंगा (jQuery की आवश्यकता):

/*
 * windowSize
 * call this function to get windowSize any time
 */
function windowSize() {
  windowHeight = window.innerHeight ? window.innerHeight : $(window).height();
  windowWidth = window.innerWidth ? window.innerWidth : $(window).width();

}

//Init Function of init it wherever you like...
windowSize();

// For example, get window size on window resize
$(window).resize(function() {
  windowSize();
  console.log('width is :', windowWidth, 'Height is :', windowHeight);
  if (windowWidth < 768) {
    console.log('width is under 768px !');
  }
});

CodePen में जोड़ा गया: http://codepen.io/moabi/pen/QNRqpY?editors=0011

फिर आप आसानी से विंडो की चौड़ाई को var के साथ पा सकते हैं: windowWidth और Height with: windowHeight

अन्यथा, एक js लाइब्रेरी प्राप्त करें: http://wicky.nillia.ms/enquire.js/

Answer 6

// Adds and removes body class depending on screen width.
function screenClass() {
    if($(window).innerWidth() > 960) {
        $('body').addClass('big-screen').removeClass('small-screen');
    } else {
        $('body').addClass('small-screen').removeClass('big-screen');
    }
}

// Fire.
screenClass();

// And recheck when window gets resized.
$(window).bind('resize',function(){
    screenClass();
});

Answer 7

उपयोग

$(window).width()

या

$(document).width()

या

$('body').width()

Answer 8

मुझे पता है कि मुझे इसका उत्तर देने में देर हो रही है, लेकिन मुझे आशा है कि यह किसी को भी मदद करता है, जिनके पास समान समस्या है। यह तब भी काम आता है जब पृष्ठ किसी कारण से ताज़ा हो जाता है।

$(document).ready(function(){

if ($(window).width() < 960 && $(window).load()) {
        $("#up").hide();
    }

    if($(window).load()){
        if ($(window).width() < 960) {
        $("#up").hide();
        }
    }

$(window).resize(function() {
    if ($(window).width() < 960 && $(window).load()) {
        $("#up").hide();
    }
    else{
        $("#up").show();
    }

    if($(window).load()){
        if ($(window).width() < 960) {
        $("#up").hide();
        }
    }
    else{
        $("#up").show();
    }

});});

Answer 9

इस कोड को आज़माएं

if ($(window).width() < 960) {
 alert('width is less than 960px');
}
else {
 alert('More than 960');
}

   if ($(window).width() < 960) {
     alert('width is less than 960px');
    }
    else {
     alert('More than 960');
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 10

नहीं, यह काम नहीं करेगा। आपको इसकी क्या आवश्यकता है !!!

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

if (screen.width <= 960) {
  alert('Less than 960');
} else if (screen.width >960) {
  alert('More than 960');
}

Comments

लिंक पोस्ट करना कोई जवाब नहीं है।

— nedaRM

खेद है कि मैं जल्दी में थोड़े था! एक मिनट रुकिए, मैं इसे अभी कर रहा हूं ...

— सौरव चौधरी

कृपया ध्यान दें कि यदि स्क्रीन। बैंडविड्थ ( document.body.clientWidthयदि वैनिला जेएस का उपयोग करके सबसे अच्छी तरह से कैप्चर किया गया है ) <= 960 है (तो यदि यहां बयान दिया गया है) तो केवल दूसरा विकल्प (ईएलएसई स्क्रीन है। बैंडविड्थ> 960) इसलिए यहां निरर्थक होने पर अन्य का उपयोग करना चाहिए। उपयोग document.body.clientWidth <=960 ? handleSmallerThan960() : handleLargerThan960()या कुछ प्रकार। (बेमानी कोड) के लिए कोई और जरूरत नहीं है

— जर्गॉल्ड