怎么用js获取页面宽高

如何用JS获取页面宽高

用JS获取页面宽高的方法包括：使用window.innerWidth和window.innerHeight、document.documentElement.clientWidth和document.documentElement.clientHeight、document.body.clientWidth和document.body.clientHeight。其中，推荐使用window.innerWidth和window.innerHeight，因为它们能够准确地获取浏览器窗口的内部宽高，包括滚动条的宽度。以下将详细展开这几种方法的使用方式和适用场景。

一、使用`window.innerWidth`和`window.innerHeight`

1. 简单易用

window.innerWidth和window.innerHeight是获取页面宽高最简便的方法。这两个属性返回的是浏览器窗口的内部宽高，即可视区域的宽高，包括滚动条的宽度。

let width = window.innerWidth;
let height = window.innerHeight;
console.log('Window Width: ', width);
console.log('Window Height: ', height);

2. 兼容性好

这两个属性在现代浏览器中都有很好的支持，包括移动端设备。它们在处理响应式设计时尤为有用，可以用来动态调整页面布局。

function updateLayout() {
    let width = window.innerWidth;
    let height = window.innerHeight;
    // 根据宽高调整布局
}
window.addEventListener('resize', updateLayout);
updateLayout();

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

1. 获取根元素的宽高

document.documentElement.clientWidth和document.documentElement.clientHeight返回的是根元素的宽高，即<html>元素的宽高。这两个属性不包括滚动条的宽度。

let width = document.documentElement.clientWidth;
let height = document.documentElement.clientHeight;
console.log('Document Element Width: ', width);
console.log('Document Element Height: ', height);

2. 常用于兼容性处理

在某些情况下，特别是需要兼容老版本IE浏览器时，可以使用这两个属性。它们提供了一个获取宽高的替代方案。

function getViewportDimensions() {
    return {
        width: document.documentElement.clientWidth || window.innerWidth,
        height: document.documentElement.clientHeight || window.innerHeight
    };
}
let dimensions = getViewportDimensions();
console.log('Viewport Width: ', dimensions.width);
console.log('Viewport Height: ', dimensions.height);

三、使用`document.body.clientWidth`和`document.body.clientHeight`

1. 获取`<body>`元素的宽高

document.body.clientWidth和document.body.clientHeight返回的是<body>元素的宽高。这两个属性也不包括滚动条的宽度。

let width = document.body.clientWidth;
let height = document.body.clientHeight;
console.log('Body Width: ', width);
console.log('Body Height: ', height);

2. 适用于具体页面布局

在某些页面布局中，需要获取<body>元素的宽高来进行特定的样式调整和布局设计。

function adjustBodyLayout() {
    let width = document.body.clientWidth;
    let height = document.body.clientHeight;
    // 根据宽高调整body布局
}
window.addEventListener('resize', adjustBodyLayout);
adjustBodyLayout();

四、综合使用方法

1. 动态调整布局

在实际项目中，通常需要根据页面宽高来动态调整布局。可以综合使用上述方法，以确保在不同浏览器和设备上的兼容性。

function getPageDimensions() {
    let width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    let height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    return { width, height };
}
function updatePageLayout() {
    let dimensions = getPageDimensions();
    console.log('Page Width: ', dimensions.width);
    console.log('Page Height: ', dimensions.height);
    // 根据页面宽高调整布局
}
window.addEventListener('resize', updatePageLayout);
updatePageLayout();

2. 使用项目管理系统

在团队项目中，特别是在研发项目中，管理系统的使用至关重要。推荐使用研发项目管理系统PingCode，以及通用项目协作软件Worktile。这两个系统可以帮助团队更高效地协作，管理项目进度和任务分配。

3. 处理跨浏览器兼容性

在实际开发过程中，跨浏览器兼容性是一个重要的问题。为了确保代码在不同浏览器中都能正常运行，可以使用以下代码进行宽高的兼容性处理。

function getCrossBrowserDimensions() {
    let width, height;
    if (typeof window.innerWidth != 'undefined') {
        width = window.innerWidth;
        height = window.innerHeight;
    } else if (typeof document.documentElement != 'undefined' && 
               typeof document.documentElement.clientWidth != 'undefined' && 
               document.documentElement.clientWidth != 0) {
        width = document.documentElement.clientWidth;
        height = document.documentElement.clientHeight;
    } else {
        width = document.getElementsByTagName('body')[0].clientWidth;
        height = document.getElementsByTagName('body')[0].clientHeight;
    }
    return { width, height };
}
let dimensions = getCrossBrowserDimensions();
console.log('Cross-Browser Width: ', dimensions.width);
console.log('Cross-Browser Height: ', dimensions.height);

总结起来，用JS获取页面宽高的方法主要包括使用window.innerWidth和window.innerHeight、document.documentElement.clientWidth和document.documentElement.clientHeight、document.body.clientWidth和document.body.clientHeight。推荐使用window.innerWidth和window.innerHeight，因为它们能够准确地获取浏览器窗口的内部宽高，包括滚动条的宽度。在实际项目中，可以结合使用这些方法，以确保在不同浏览器和设备上的兼容性。同时，推荐在团队项目中使用PingCode和Worktile进行高效的项目管理和协作。