如何使用javascript检查视口是否小于一定的宽度

Question

我想有一个简单的语句来设置一个变量bool为false或true。当viewport小于768px时，isMobile应该设置为true，大于768px时，isMobile应该设置为false。

我不知道为什么下面的代码什么都不做。控制台日志中也没有错误。

var w = $(window).width();
var isMobile = false;
function resizer() {
    if (w < 768) {
        console.log("resize");
        isMobile = true;
    } else {
        isMobile = false;
    }
}
$(window).resize(function() {
    resizer();
});

Answer 1

因为你不会在每次调整尺寸时都测量宽度。试试这样:

var isMobile = false;
function resizer() {
    var w = $(window).width();
    if (w < 768) {
        console.log("resize");
        isMobile = true;
    } else { 
        isMobile = false;
    }
}
$(window).on('load resize', function(){ 
    resizer();
});

Answer 2

将var w = $(window).width();移到resizer()中。这将得到window的电流尺寸的值。

请参阅代码中的内联注释。

var isMobile = false;
function resizer() {
    var w = $(window).width();
    // Move this inside resize handler
    if (w < 768) {
        console.log("resize");
        isMobile = true;
    } else {
        isMobile = false;
    }
}
$(window).resize(function() {
    resizer();
}).trigger('resize');
// ^^^^^^^^^^^^^^^^^^
// 
// Trigger event on page load