js怎么获取浏览器窗口大小

使用JavaScript获取浏览器窗口大小的方法包括：window.innerWidth、window.innerHeight、document.documentElement.clientWidth、document.documentElement.clientHeight。其中，使用window.innerWidth和window.innerHeight是获取浏览器窗口内部宽高的最直接方式，而document.documentElement.clientWidth和document.documentElement.clientHeight则用于获取文档的可视区域大小。这些方法可以帮助开发者动态调整页面布局，提升用户体验。

为了帮助你更好地理解如何获取浏览器窗口大小，本文将详细介绍这些方法的使用场景、注意事项以及一些实际应用案例。

一、WINDOW.INNERWIDTH 和 WINDOW.INNERHEIGHT

window.innerWidth 和 window.innerHeight 是JavaScript中最常用的获取浏览器窗口内部宽高的方法。

1.1、基本用法

这两个属性返回浏览器窗口的宽度和高度，包括滚动条：

let width = window.innerWidth;

let height = window.innerHeight;
console.log(`Width: ${width}, Height: ${height}`);

1.2、应用场景

• 响应式设计：根据窗口大小调整页面布局。
• 动态调整元素大小：例如，全屏背景图片或视频。
• 窗口大小改变事件：可以监听窗口大小变化事件（resize）并实时调整内容。

window.addEventListener('resize', function() {

    let width = window.innerWidth;
    let height = window.innerHeight;
    console.log(`Resized to Width: ${width}, Height: ${height}`);
});

1.3、注意事项

• 滚动条的影响：window.innerWidth 和 window.innerHeight 包括滚动条的宽度和高度。
• 跨浏览器兼容性：这些属性在现代浏览器中表现一致，但需要注意一些旧版本浏览器的兼容性。

二、DOCUMENT.DOCUMENTELEMENT.CLIENTWIDTH 和 CLIENTHEIGHT

document.documentElement.clientWidth 和 document.documentElement.clientHeight 返回文档的可视区域大小，不包括滚动条。

2.1、基本用法

let width = document.documentElement.clientWidth;

let height = document.documentElement.clientHeight;
console.log(`Client Width: ${width}, Client Height: ${height}`);

2.2、应用场景

• 精确的可视区域大小：当需要精确获取不包括滚动条的可视区域大小时，这两个属性非常有用。
• 内容布局：适用于需要根据可视区域大小进行内容布局的场景。

2.3、注意事项

• 滚动条不包括在内：这两个属性返回的值不包括滚动条的宽度和高度。
• 跨浏览器兼容性：与 window.innerWidth 和 window.innerHeight 类似，现代浏览器中表现一致，但需要注意旧版本浏览器的兼容性。

三、其他获取窗口大小的方法

3.1、WINDOW.OUTERWIDTH 和 WINDOW.OUTERHEIGHT

window.outerWidth 和 window.outerHeight 返回浏览器窗口的整体宽高，包括工具栏和滚动条。

let outerWidth = window.outerWidth;

let outerHeight = window.outerHeight;
console.log(`Outer Width: ${outerWidth}, Outer Height: ${outerHeight}`);

3.2、SCREEN.WIDTH 和 SCREEN.HEIGHT

screen.width 和 screen.height 返回用户屏幕的分辨率。

let screenWidth = screen.width;

let screenHeight = screen.height;
console.log(`Screen Width: ${screenWidth}, Screen Height: ${screenHeight}`);

这些属性主要用于了解用户设备的屏幕尺寸，通常用于全屏应用或游戏中。

四、动态调整页面布局

通过获取浏览器窗口大小，可以动态调整页面布局以提升用户体验。

4.1、响应式布局

根据窗口大小调整布局，使用媒体查询和JavaScript结合的方式实现响应式设计。

/* CSS Media Queries */

@media (max-width: 768px) {
    body {
        background-color: lightblue;
    }
}

// JavaScript for Dynamic Adjustment

function adjustLayout() {
    let width = window.innerWidth;
    if (width < 768) {
        document.body.style.backgroundColor = "lightblue";
    } else {
        document.body.style.backgroundColor = "white";
    }
}
window.addEventListener('resize', adjustLayout);
adjustLayout(); // Initial call

4.2、全屏元素

根据窗口大小动态调整全屏背景图片或视频。

function resizeBackground() {

    let width = window.innerWidth;
    let height = window.innerHeight;
    let background = document.getElementById('background');
    background.style.width = `${width}px`;
    background.style.height = `${height}px`;
}
window.addEventListener('resize', resizeBackground);
resizeBackground(); // Initial call

五、跨浏览器兼容性

5.1、旧版IE浏览器

在旧版IE浏览器中，document.documentElement.clientWidth 和 document.documentElement.clientHeight 可能不如预期工作，需要使用 document.body.clientWidth 和 document.body.clientHeight 作为备选方案。

let width = document.documentElement.clientWidth || document.body.clientWidth;

let height = document.documentElement.clientHeight || document.body.clientHeight;
console.log(`Compatible Width: ${width}, Compatible Height: ${height}`);

5.2、使用Polyfill

可以使用Polyfill来确保在所有浏览器中获取窗口大小的一致性。

function getWindowSize() {

    let width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    let height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    return { width, height };
}
let size = getWindowSize();
console.log(`Polyfill Width: ${size.width}, Polyfill Height: ${size.height}`);

六、实用工具和库

6.1、使用框架和库

一些前端框架和库，如Bootstrap、Foundation等，提供了响应式设计的解决方案，可以减少手动调整窗口大小的工作量。

6.2、项目管理系统

在开发过程中，使用项目管理系统如研发项目管理系统PingCode和通用项目协作软件Worktile，可以有效管理项目进度和任务分配，提高团队协作效率。

七、总结

获取浏览器窗口大小是前端开发中常见的需求，通过window.innerWidth、window.innerHeight、document.documentElement.clientWidth和clientHeight等属性，可以动态调整页面布局，提升用户体验。在实际应用中，还需要考虑跨浏览器兼容性，并可以借助前端框架和项目管理系统来提高开发效率。

相关问答FAQs：

1. 如何使用JavaScript获取浏览器窗口的宽度和高度？

使用JavaScript可以通过以下代码获取浏览器窗口的宽度和高度：

var windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

这段代码首先尝试使用window.innerWidth和window.innerHeight获取窗口的宽度和高度。如果这两个属性不可用，则使用document.documentElement.clientWidth和document.documentElement.clientHeight来获取宽度和高度。如果这两个属性还不可用，则使用document.body.clientWidth和document.body.clientHeight来获取宽度和高度。

2. 如何实时获取浏览器窗口大小的变化？

可以使用以下代码来实时监听浏览器窗口大小的变化：

window.addEventListener('resize', function() {
    var windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    var windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    // 在这里处理窗口大小变化的逻辑
});

通过添加resize事件监听器，当窗口大小变化时，会触发回调函数。在回调函数中，可以再次获取窗口的宽度和高度，并进行相应的处理。

3. 如何在页面加载完成后获取浏览器窗口的大小？

可以使用以下代码在页面加载完成后获取浏览器窗口的大小：

window.addEventListener('DOMContentLoaded', function() {
    var windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    var windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    // 在这里处理页面加载完成后获取窗口大小的逻辑
});

通过添加DOMContentLoaded事件监听器，当页面加载完成后，会触发回调函数。在回调函数中，可以获取窗口的宽度和高度，并进行相应的处理。