Lakukan sesuatu jika lebar layar kurang dari 960 px

Bagaimana saya bisa membuat jQuery melakukan sesuatu jika lebar layar saya kurang dari 960 piksel? Kode di bawah ini selalu mengaktifkan peringatan ke-2, terlepas dari ukuran jendela saya:

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

    alert('More than 960');
}

Gunakan jQuery untuk mendapatkan lebar jendela.

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

Anda mungkin ingin menggabungkannya dengan acara pengubahan ukuran:

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

Untuk RJ:

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

Saya mencoba http://api.jquery.com/off/ tetapi tidak berhasil, jadi saya pergi dengan flag eventFired.

Saya sarankan untuk tidak menggunakan jQuery untuk hal seperti itu dan lanjutkan dengan window.innerWidth:

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

Anda juga dapat menggunakan kueri media dengan javascript.

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

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

Saya sarankan (jQuery diperlukan):

/*
 * 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 !');
  }
});

Ditambahkan dalam CodePen: http://codepen.io/moabi/pen/QNRqpY?editors=0011

Maka Anda bisa dengan mudah mendapatkan lebar jendela dengan var: windowWidth dan Height dengan: windowHeight

jika tidak, dapatkan perpustakaan js: http://wicky.nillia.ms/enquire.js/

// 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();
});

menggunakan

$(window).width()

atau

$(document).width()

atau

$('body').width()

Saya tahu saya terlambat untuk menjawab ini, tapi saya harap ini bisa membantu siapa saja yang memiliki masalah serupa. Ini juga berfungsi saat laman diperbarui dengan alasan apa pun.

$(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();
    }

});});

Coba kode ini

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>

tidak, semua ini tidak akan berfungsi. Yang Anda butuhkan adalah ini !!!

Coba ini:

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