学习使用js监测浏览器窗口大小变化

时间:2025-01-21 14:37:16

学习使用js监测浏览器窗口大小变化

在JavaScript中,可以通过监听resize事件来检测浏览器窗口的大小变化。以下是一个简单的示例代码,用于检测浏览器窗口大小的变化并在控制台输出新的窗口尺寸:



javascript
// 定义一个处理窗口大小变化的函数
function handleResize() {
    console.log('Window size changed to: ' + window.innerWidth + 'x' + window.innerHeight);
}

// 监听resize事件
window.addEventListener('resize', handleResize);

// 初始调用
handleResize();

当浏览器窗口大小变化时,handleResize函数会被触发,并输出新的窗口宽度和高度。这段代码通常放置在全局作用域中或者在文档加载完成后执行。