获取窗口大小

weixin_43843897

已于 2025-02-12 16:53:06 修改

阅读量347

点赞数 1

文章标签： javascript 前端开发语言

于 2025-02-12 15:29:54 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_43843897/article/details/145593397

版权

1. 使用 `window.innerWidth` 和 `window.innerHeight` 获取窗口大小

window.innerWidth：获取浏览器窗口的内部宽度（包括滚动条）。
window.innerHeight：获取浏览器窗口的内部高度（包括滚动条）。

2. 监听 `resize` 事件

使用 window.addEventListener('resize', callback) 监听窗口大小变化。

3. 实时更新窗口大小

在 resize 事件的回调函数中，更新窗口大小的值。

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>实时统计窗口大小</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 20px;
    }
    #window-size {
      font-size: 18px;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <div id="window-size">窗口大小：</div>

  <script>
    // 获取显示窗口大小的元素
    const windowSizeElement = document.getElementById('window-size');

    // 更新窗口大小的函数
    function updateWindowSize() {
      const width = window.innerWidth;
      const height = window.innerHeight;
      windowSizeElement.textContent = `窗口大小：${width} x ${height}`;
    }

    // 初始加载时更新一次
    updateWindowSize();
    // 防抖优化
    function debounce(func, wait) {
      let timeout;
      return function (...args) {
        clearTimeout(timeout);
        timeout = setTimeout(() => func.apply(this, args), wait);
      };
    }

   const debouncedUpdateWindowSize = debounce(updateWindowSize, 100);
   window.addEventListener('resize', debouncedUpdateWindowSize);
  </script>
</body>
</html>