js window 窗口大小

在JavaScript中，window 对象代表浏览器窗口或框架。window 对象提供了多种属性和方法来操作浏览器窗口，包括获取和设置窗口的大小。

基础概念

窗口大小属性：
- window.innerWidth 和 window.innerHeight：这两个属性返回浏览器窗口的视口（viewport）宽度和高度，以像素为单位，包括滚动条（如果存在）。
- window.outerWidth 和 window.outerHeight：这两个属性返回浏览器窗口的外部宽度和高度，包括工具栏、滚动条等。

窗口大小调整事件：
- window.onresize：当浏览器窗口的大小发生变化时，会触发这个事件。

应用场景

自适应布局：在移动设备和桌面设备之间切换时，动态调整页面布局。
图表和地图：根据窗口大小调整图表和地图的尺寸，确保在不同设备上都能清晰显示。
广告和弹窗：根据窗口大小调整广告和弹窗的位置和尺寸。

示例代码

获取窗口大小

// 获取视口宽度和高度
const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;

console.log(`Viewport Width: ${viewportWidth}px`);
console.log(`Viewport Height: ${viewportHeight}px`);

// 获取窗口外部宽度和高度
const outerWidth = window.outerWidth;
const outerHeight = window.outerHeight;

console.log(`Outer Width: ${outerWidth}px`);
console.log(`Outer Height: ${outerHeight}px`);

监听窗口大小变化

window.onresize = function() {
    const newWidth = window.innerWidth;
    const newHeight = window.innerHeight;
    console.log(`Window resized to: ${newWidth}px x ${newHeight}px`);
    
    // 在这里可以添加调整布局的代码
};

动态调整布局示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Layout</title>
    <style>
        #box {
            width: 50%;
            height: 50%;
            background-color: lightblue;
            transition: all 0.3s;
        }
    </style>
</head>
<body>
    <div id="box"></div>

    <script>
        function adjustLayout() {
            const box = document.getElementById('box');
            const width = window.innerWidth;
            const height = window.innerHeight;

            if (width < 600) {
                box.style.width = '100%';
                box.style.height = '100px';
            } else {
                box.style.width = '50%';
                box.style.height = '50%';
            }
        }

        window.onresize = adjustLayout;
        window.onload = adjustLayout; // 初始调用
    </script>
</body>
</html>

常见问题及解决方法

窗口大小变化时布局闪烁：
- 使用CSS过渡效果（如transition）来平滑布局变化。
- 在调整布局前，先计算好新的尺寸，避免频繁重绘。

滚动条宽度影响布局：
- 使用window.innerWidth和window.innerHeight来获取视口尺寸，这些属性已经包含了滚动条的宽度。
移动设备上的布局问题：
- 使用媒体查询（Media Queries）来针对不同屏幕尺寸设置不同的样式。
- 监听resize事件，并在事件处理函数中调整布局。

通过以上方法，可以有效地处理JavaScript中窗口大小相关的问题，提升网页的响应性和用户体验。