Làm gì đó nếu chiều rộng màn hình nhỏ hơn 960 px

Làm cách nào để jQuery có thể làm gì đó nếu chiều rộng màn hình của tôi nhỏ hơn 960 pixel? Mã bên dưới luôn kích hoạt cảnh báo thứ 2, bất kể kích thước cửa sổ của tôi:

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

    alert('More than 960');
}

Sử dụng jQuery để có được chiều rộng của cửa sổ.

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

Bạn có thể muốn kết hợp nó với một sự kiện thay đổi kích thước:

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

Đối với 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');
        }
    }
});

Tôi đã thử http://api.jquery.com/off/ nhưng không thành công vì vậy tôi đã đi với cờ eventFired.

Tôi khuyên bạn không nên sử dụng jQuery cho việc đó và tiến hành window.innerWidth:

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

Bạn cũng có thể sử dụng truy vấn phương tiện với javascript.

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

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

Tôi muốn đề xuất (cần 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 !');
  }
});

Đã thêm vào CodePen: http://codepen.io/moabi/pen/QNRqpY?editors=0011

Sau đó, bạn có thể dễ dàng lấy chiều rộng của cửa sổ với var: windowWidth và height với: windowHeight

nếu không, hãy lấy thư viện 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();
});

sử dụng

$(window).width()

hoặc là

$(document).width()

hoặc là

$('body').width()

Tôi biết tôi đến trễ để trả lời điều này, nhưng tôi hy vọng nó có ích cho bất kỳ ai gặp vấn đề tương tự. Nó cũng hoạt động khi làm mới trang vì bất kỳ lý do.

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

});});

Hãy thử mã này

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>

Không, không ai trong số này sẽ làm việc. Cái bạn cần là cái này !!!

Thử cái này:

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