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

Question

我想要一个简单的语句来将变量 bool 设置为 false 或 true。当视口小于 768px 时，isMobile 应设置为 true，超过此值时应设置为 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 的

current

尺寸值。

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

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

Answer 3

您可以使用以下方式：

• 方法一：检查用户是否使用移动设备

const isMobile = /Android/i.test(navigator.userAgent);

• 方法二：检查屏幕宽度是否小于680像素

const isMobileWidth = window.innerWidth < 680;