怎样用 JavaScript 准确获取手机屏幕的宽度和高度

手机屏幕的宽度和高度可以通过JavaScript的window.screen对象、window.innerWidth、window.innerHeight属性、document.documentElement.clientWidth、document.documentElement.clientHeight属性来获取。window.screen对象提供了设备屏幕的信息，包括屏幕的绝对宽度和高度，而window.innerWidth和window.innerHeight属性通常用于获取浏览器视窗的宽度和高度，包括了滚动条。而document.documentElement.clientWidth和document.documentElement.clientHeight属性则不包含滚动条，在移动设备上这些属性往往更准确地表达了可用于网页内容的屏幕区域大小。

获取精确屏幕尺寸的关键在于理解不同的API在不同环境下的工作方式，并合理使用它们。例如，window.screen对象给出的是设备的物理分辨率，而对于网页设计来说，通常更关注的是视觉视窗的尺寸，这时就需要使用window.innerWidth和window.innerHeight或document.documentElement.clientWidth和document.documentElement.clientHeight属性。此外，若要考虑浏览器的兼容性和网页响应式设计，还需要使用媒体查询（Media Queries）来适配不同设备。

一、WINDOW.SCREEN对象

window.screen对象提供了设备屏幕的信息。通过它可以获取屏幕的宽度screen.width和高度screen.height。这代表了整个屏幕的物理分辨率，而不仅仅是浏览器视窗的尺寸。

console.log("屏幕宽度: " + window.screen.width);
console.log("屏幕高度: " + window.screen.height);

然而，由于设备像素比(Device Pixel Ratio, DPR)的存在，物理分辨率可能不等同于CSS中的逻辑像素单位。因此我们还需要了解window.devicePixelRatio，它表示物理像素和CSS像素的比率。如果要计算CSS像素，可以将屏幕的尺寸除以DPR。

二、WINDOW.INNERWIDTH和WINDOW.INNERHEIGHT

当需要获取当前浏览器视窗的宽度和高度时，window.innerWidth和window.innerHeight属性可以派上用场。这包括了滚动条的宽度，但不包括浏览器工具栏和菜单栏。

console.log("视窗宽度(含滚动条): " + window.innerWidth);
console.log("视窗高度(含滚动条): " + window.innerHeight);

但要注意，这些值在用户缩放页面内容时会发生变化。

三、DOCUMENT.DOCUMENTELEMENT.CLIENTWIDTH和CLIENTHEIGHT

如果想获取不包括滚动条的视窗内部宽度和高度，可以使用document.documentElement.clientWidth和document.documentElement.clientHeight属性。

console.log("视窗宽度(不含滚动条): " + document.documentElement.clientWidth);
console.log("视窗高度(不含滚动条): " + document.documentElement.clientHeight);

这两个属性在不同设备和浏览器中相对一致，所以它们经常被用在响应式设计中。

四、响应式设计和媒体查询

在响应式设计中，通常使用CSS媒体查询来根据屏幕尺寸调整样式。JavaScript也可以利用window.matchMedia方法来运用媒体查询。

if (window.matchMedia("(max-width: 768px)").matches) {
    console.log("这是一个宽度小于或等于768px的屏幕");
}

媒体查询让开发者针对不同的屏幕尺寸应用不同的CSS规则或JavaScript逻辑。

五、综合示例和最佳实践

结合以上方法，我们可以创建一个函数，它可以根据当前环境选择最合适的方式来获取设备宽度和高度。

function getViewportSize() {
    let width, height;
    if (typeof window.innerWidth === 'number') {
        // Non-IE
        width = window.innerWidth;
        height = window.innerHeight;
    } else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
        // IE 6+ in 'standards compliant mode'
        width = document.documentElement.clientWidth;
        height = document.documentElement.clientHeight;
    } else {
        // Older versions of IE
        width = document.body.clientWidth;
        height = document.body.clientHeight;
    }
    return { width: width, height: height };
}
const viewportSize = getViewportSize();
console.log("视窗宽度: " + viewportSize.width);
console.log("视窗高度: " + viewportSize.height);

在这个示例中，我们首先检查是否存在window.innerWidth和window.innerHeight属性。如果不存在，我们再尝试查看document.documentElement.clientWidth和document.documentElement.clientHeight。最后，作为兜底方案，我们查看document.body.clientWidth和document.body.clientHeight。

六、考虑设备旋转导致的变化

对于移动设备，用户可能会旋转设备导致屏幕宽度和高度互换。为了处理这种情况，可以通过监听 orientationchange 事件来更新屏幕尺寸。

function updateViewportDimensions() {
    const viewportSize = getViewportSize();
    console.log("更新后的视窗宽度: " + viewportSize.width);
    console.log("更新后的视窗高度: " + viewportSize.height);
}
window.addEventListener("orientationchange", updateViewportDimensions);

通过在JavaScript中使用正确的API和考虑到设备像素比，媒体查询，以及设备方向的变化，我们可以准确地获取到手机屏幕的宽度和高度，从而为用户提供更好的网页浏览体验。