您可以使用JavaScript中的
window.innerWidth
或
window.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
事件处理函数,以便在用户调整浏览器窗口大小时,能够重新执行相应的代码逻辑。