js中怎么获取屏幕的宽和高

在JavaScript中，可以通过window.innerWidth和window.innerHeight来获取屏幕的宽和高、使用screen.width和screen.height、利用document.documentElement.clientWidth和document.documentElement.clientHeight。其中，最常用和推荐的方法是通过window.innerWidth和window.innerHeight来获取屏幕的宽和高，因为它们能够动态反映浏览器窗口的实际可视区域。

详细描述一下使用window.innerWidth和window.innerHeight的方法：

window.innerWidth和window.innerHeight属性返回的是窗口的内部宽度和高度，包括任何滚动条，但不包括工具栏和菜单栏。这意味着这些属性能够直接反映用户在浏览器中看到的页面内容区域的大小，适用于绝大多数动态布局和响应式设计的需求。

一、获取屏幕宽高的基本方法

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

window.innerWidth和window.innerHeight是获取屏幕宽度和高度的最直接方法。这两个属性返回的是浏览器窗口内部的宽度和高度，包括滚动条。

const screenWidth = window.innerWidth;
const screenHeight = window.innerHeight;
console.log(`Screen Width: ${screenWidth}, Screen Height: ${screenHeight}`);

这种方法的优势在于它能动态反映用户当前看到的窗口大小，非常适用于需要实时响应用户窗口调整的应用场景。

使用`screen.width`和`screen.height`

screen.width和screen.height属性提供的是用户屏幕的整体分辨率。这些属性不会随浏览器窗口大小的变化而变化。

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

这种方法更适合需要了解用户设备总体分辨率的情况，比如在全屏应用或游戏开发中。

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

这些属性返回的是文档的可见区域的宽度和高度。与window.innerWidth和window.innerHeight类似，但在某些情况下可能更适合使用。

const screenWidth = document.documentElement.clientWidth;
const screenHeight = document.documentElement.clientHeight;
console.log(`Screen Width: ${screenWidth}, Screen Height: ${screenHeight}`);

二、响应式设计中的应用

在现代Web开发中，响应式设计是一个重要的概念。通过获取屏幕宽高，开发者可以根据用户设备的不同动态调整页面布局。

动态调整布局

通过监听窗口的resize事件，可以动态调整页面的布局。例如，当用户调整浏览器窗口大小时，可以重新计算并调整某些元素的大小或位置。

window.addEventListener('resize', () => {
    const screenWidth = window.innerWidth;
    const screenHeight = window.innerHeight;
    // 这里可以添加根据屏幕尺寸调整布局的代码
    console.log(`Screen Width: ${screenWidth}, Screen Height: ${screenHeight}`);
});

媒体查询与JavaScript的结合

尽管CSS中的媒体查询可以很好地处理响应式设计，但在某些复杂的交互场景中，JavaScript的动态调整功能更加灵活。

function adjustLayout() {
    const screenWidth = window.innerWidth;
    if (screenWidth < 600) {
        // 小屏幕布局
        document.body.classList.add('small-screen');
        document.body.classList.remove('large-screen');
    } else {
        // 大屏幕布局
        document.body.classList.add('large-screen');
        document.body.classList.remove('small-screen');
    }
}
window.addEventListener('resize', adjustLayout);
adjustLayout(); // 初始化时调用一次

三、不同设备上的考虑

不同设备的屏幕尺寸和分辨率差异很大，因此在设计和开发过程中需要考虑这些差异。

桌面设备

桌面设备的屏幕尺寸通常较大，但用户可能会调整浏览器窗口的大小，因此需要动态获取窗口的实际尺寸。

移动设备

移动设备的屏幕尺寸较小，但分辨率通常较高。需要特别注意不同设备的屏幕宽度，确保布局在小屏幕上也能友好展示。

平板设备

平板设备的屏幕尺寸介于桌面和移动设备之间。需要特别处理横屏和竖屏两种模式下的布局。

高DPI屏幕

高DPI屏幕（如Retina显示屏）的分辨率更高，可能需要根据设备像素比（device pixel ratio）进行调整。

const devicePixelRatio = window.devicePixelRatio || 1;
const screenWidth = window.innerWidth * devicePixelRatio;
const screenHeight = window.innerHeight * devicePixelRatio;
console.log(`Screen Width: ${screenWidth}, Screen Height: ${screenHeight}`);

四、性能优化

频繁获取和调整屏幕尺寸可能会影响性能，特别是在窗口调整事件中。

节流和防抖

通过节流和防抖技术，可以减少频繁触发的调整操作，从而提高性能。

防抖

function debounce(func, wait) {
    let timeout;
    return function(...args) {
        const context = this;
        clearTimeout(timeout);
        timeout = setTimeout(() => func.apply(context, args), wait);
    };
}
window.addEventListener('resize', debounce(adjustLayout, 200));

节流

function throttle(func, limit) {
    let inThrottle;
    return function(...args) {
        const context = this;
        if (!inThrottle) {
            func.apply(context, args);
            inThrottle = true;
            setTimeout(() => inThrottle = false, limit);
        }
    };
}
window.addEventListener('resize', throttle(adjustLayout, 200));

使用`requestAnimationFrame`

在需要高频率调整的场景中，使用requestAnimationFrame可以更加平滑地进行界面更新。

let resizeTimeout;
window.addEventListener('resize', () => {
    if (resizeTimeout) {
        cancelAnimationFrame(resizeTimeout);
    }
    resizeTimeout = requestAnimationFrame(adjustLayout);
});

五、浏览器兼容性

虽然大多数现代浏览器都支持上述属性，但在实际应用中仍需考虑兼容性问题。

检查属性是否存在

在使用这些属性之前，可以检查它们是否存在，以确保兼容性。

const screenWidth = window.innerWidth || document.documentElement.clientWidth || screen.width;
const screenHeight = window.innerHeight || document.documentElement.clientHeight || screen.height;
console.log(`Screen Width: ${screenWidth}, Screen Height: ${screenHeight}`);

Polyfill

对于某些不支持的浏览器，可以通过Polyfill提供兼容性支持。

if (!window.innerWidth) {
    Object.defineProperty(window, 'innerWidth', {
        get: function() {
            return document.documentElement.clientWidth;
        }
    });
}
if (!window.innerHeight) {
    Object.defineProperty(window, 'innerHeight', {
        get: function() {
            return document.documentElement.clientHeight;
        }
    });
}

通过以上方法和技巧，可以在JavaScript中高效、灵活地获取屏幕的宽度和高度，并应用于各种实际开发场景中。无论是响应式设计、不同设备的适配，还是性能优化，这些技巧都能帮助开发者创建更加友好和高效的Web应用。