您当前的位置:首页 > 网络编程

根据浏览器宽度运行js

时间:2024-03-31 08:57:00    来源:    作者:
您可以使用JavaScript中的window.innerWidthwindow.outerWidth属性来获取当前浏览器窗口的宽度,并据此执行相应的JavaScript代码。以下是一个简单的例子:
// 获取当前浏览器窗口的宽度
var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
 // 根据窗口宽度执行不同的JavaScript代码
if (width < 768) {
    // 窗口宽度小于768像素时的代码
    console.log('小屏设备');
} else {
    // 窗口宽度大于等于768像素时的代码
    console.log('大屏设备');
}
 
// 监听窗口大小变化,并重新运行JS代码
window.onresize = function() {
    var newWidth = window.innerWidth;
    if (newWidth < 768) {
        console.log('窗口宽度变小,现在是小屏设备');
    } else {
        console.log('窗口宽度变大,现在是大屏设备');
    }
};

这段代码首先获取当前浏览器窗口的宽度,然后根据这个宽度值执行相应的操作。同时,它还设置了一个window.onresize事件处理函数,以便在用户调整浏览器窗口大小时,能够重新执行相应的代码逻辑。
推荐资讯