怎样用 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和考虑到设备像素比，媒体查询，以及设备方向的变化，我们可以准确地获取到手机屏幕的宽度和高度，从而为用户提供更好的网页浏览体验。

相关问答FAQs：

1. JavaScript如何获取手机屏幕的宽度和高度？
在JavaScript中，可以通过使用window.innerWidth来获取手机屏幕的宽度，而使用window.innerHeight来获取屏幕的高度。这些属性会返回当前浏览器窗口的视口宽度和高度。

2. 如何使用JavaScript获取手机屏幕的实际宽度和高度？
要获取手机屏幕的实际宽度和高度，而不仅仅是浏览器窗口的宽度和高度，可以使用window.screen.width和window.screen.height属性。这些属性将返回手机屏幕的实际宽度和高度，而不考虑浏览器窗口的大小。

3. 如何使用JavaScript在不同设备上获取准确的屏幕宽度和高度？
不同设备上的屏幕宽度和高度可能会有所不同。为了确保获取的数据准确，可以使用window.devicePixelRatio属性将屏幕的物理像素与逻辑像素进行比较。通过将视口宽度和高度乘以设备像素比，可以得到准确的屏幕宽度和高度，以便在不同设备上进行适配和布局。

最后建议，企业在引入信息化系统初期，切记要合理有效地运用好工具，这样一来不仅可以让公司业务高效地运行，还能最大程度保证团队目标的达成。同时还能大幅缩短系统开发和部署的时间成本。特别是有特定需求功能需要定制化的企业，可以采用我们公司自研的企业级低代码平台：织信Informat。 织信平台基于数据模型优先的设计理念，提供大量标准化的组件，内置AI助手、组件设计器、自动化（图形化编程）、脚本、工作流引擎（BPMN2.0）、自定义API、表单设计器、权限、仪表盘等功能，能帮助企业构建高度复杂核心的数字化系统。如ERP、MES、CRM、PLM、SCM、WMS、项目管理、流程管理等多个应用场景，全面助力企业落地国产化/信息化/数字化转型战略目标。 版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们微信：Informat_5 处理，核实后本网站将在24小时内删除。