js如何获得窗口长宽

在JavaScript中，通过window对象的内置属性可以轻松获得浏览器窗口的长宽。可以使用window.innerWidth和window.innerHeight来获取窗口的内部宽度和高度，或者使用document.documentElement.clientWidth和document.documentElement.clientHeight来获取包含滚动条的宽度和高度。 在实际开发过程中，根据需求选择合适的方法来获取窗口尺寸至关重要。下面将详细介绍这两种方法及其适用场景。

一、使用window.innerWidth和window.innerHeight

1、概述

window.innerWidth 和 window.innerHeight 返回的是窗口视口（viewport）的宽度和高度，即浏览器窗口的可视区域尺寸。这个方法最适合用来获取不包括滚动条的窗口尺寸。

let width = window.innerWidth;

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

2、优点和缺点

优点：

• 简单直接：直接获取视口的宽高，代码简洁，易于理解。
• 实时更新：当窗口大小变化时，获取的值会实时更新。

缺点：

• 不包括滚动条：如果页面中存在滚动条，返回的宽度和高度不包括滚动条的尺寸。

3、适用场景

这种方法适用于需要动态响应窗口大小变化的场景，如响应式设计和窗口大小变化的事件监听。

window.addEventListener('resize', () => {

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

二、使用document.documentElement.clientWidth和document.documentElement.clientHeight

1、概述

document.documentElement.clientWidth 和 document.documentElement.clientHeight 返回的是包含滚动条的窗口尺寸。这些属性更适合需要知道整个文档尺寸的场景。

let width = document.documentElement.clientWidth;

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

2、优点和缺点

优点：

• 包含滚动条：返回的宽度和高度包括滚动条的尺寸，能够更全面地反映窗口的实际大小。

缺点：

• 兼容性问题：在某些浏览器中，尤其是早期版本的IE，可能会有兼容性问题。

3、适用场景

这种方法适用于固定布局的场景，或者需要精确计算窗口尺寸的情况。也适用于需要知道文档整体尺寸的情况。

function logDocumentSize() {

    let width = document.documentElement.clientWidth;
    let height = document.documentElement.clientHeight;
    console.log(`Document Width: ${width}, Document Height: ${height}`);
}
window.addEventListener('resize', logDocumentSize);
logDocumentSize();

三、结合两种方法

在实际开发中，有时需要结合两种方法，以便在不同场景下获取合适的窗口尺寸。

function getWindowSize() {

    let width = window.innerWidth || document.documentElement.clientWidth;
    let height = window.innerHeight || document.documentElement.clientHeight;
    return { width, height };
}
console.log(getWindowSize());

四、处理窗口尺寸变化

1、使用resize事件

监听窗口的resize事件，可以在窗口尺寸变化时动态更新页面布局。

window.addEventListener('resize', () => {

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

2、调整页面布局

根据窗口尺寸动态调整页面布局，提升用户体验。

function adjustLayout() {

    let { width, height } = getWindowSize();
    if (width < 600) {
        document.body.style.backgroundColor = 'lightblue';
    } else {
        document.body.style.backgroundColor = 'lightgreen';
    }
}
window.addEventListener('resize', adjustLayout);
adjustLayout();

五、跨浏览器兼容性

为了确保代码在不同浏览器中都能正常运行，需要注意以下几点：

1. 测试不同浏览器：在开发过程中，务必在多个浏览器中测试代码，确保兼容性。
2. 使用polyfill：对于某些不支持的浏览器，可以使用polyfill来实现兼容。
3. 考虑用户体验：在不同的浏览器中，尽量保持一致的用户体验。

六、实战应用

1、响应式网页设计

响应式网页设计是现代网页开发的趋势，通过动态调整页面布局，提升用户体验。

function responsiveDesign() {

    let { width, height } = getWindowSize();
    if (width < 768) {
        document.body.classList.add('mobile');
    } else {
        document.body.classList.remove('mobile');
    }
}
window.addEventListener('resize', responsiveDesign);
responsiveDesign();

2、动态数据可视化

在数据可视化应用中，动态调整图表尺寸，确保图表在不同设备上都能清晰展示。

function resizeChart() {

    let { width, height } = getWindowSize();
    let chart = document.getElementById('chart');
    chart.style.width = `${width}px`;
    chart.style.height = `${height}px`;
}
window.addEventListener('resize', resizeChart);
resizeChart();

七、总结

在JavaScript中获取窗口的长宽是开发过程中常见的需求。使用window.innerWidth和window.innerHeight可以方便地获取视口尺寸，而document.documentElement.clientWidth和document.documentElement.clientHeight则适用于需要包含滚动条的情况。 在实际开发中，根据具体需求选择合适的方法，并结合resize事件处理窗口尺寸变化，能够提升用户体验和页面的响应性。同时，注意跨浏览器兼容性，确保代码在不同浏览器中都能正常运行。在响应式设计和动态数据可视化等实际应用中，灵活运用这些方法，可以有效提升网页的用户体验。

相关问答FAQs：

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

JavaScript提供了几种方法来获取浏览器窗口的宽度和高度。以下是两种常用的方法：

• 使用window.innerWidth和window.innerHeight属性可以获取浏览器窗口的内部宽度和高度，不包括滚动条和边框。
• 使用document.documentElement.clientWidth和document.documentElement.clientHeight属性可以获取浏览器窗口的可见宽度和高度，包括滚动条和边框。

请注意，以上方法在大多数现代浏览器中都可以正常工作，但在一些旧版本的IE浏览器中可能会有兼容性问题。

2. 如何使用JavaScript获取网页文档的总宽度和总高度？

如果您想获取整个网页文档的总宽度和总高度（包括滚动条和边框），可以使用以下方法：

• 使用document.documentElement.scrollWidth和document.documentElement.scrollHeight属性可以获取网页文档的总宽度和总高度。

请注意，以上方法返回的是整个文档的宽度和高度，包括未显示的部分。如果您只想获取当前可见区域的宽度和高度，请参考第一个问题中的方法。

3. 如何在JavaScript中实时监测窗口的大小变化？

如果您需要在窗口大小发生变化时执行一些操作，可以使用resize事件来监测窗口的大小变化。以下是一个示例代码：

window.addEventListener('resize', function() {
    // 在这里执行需要的操作
});

通过添加一个resize事件监听器，当窗口大小发生变化时，其中的代码将被执行。您可以根据需要在该代码块中编写适当的操作，比如更新页面布局或响应式设计。