如何在JavaScript中获取屏幕分辨率

在前端开发中，我们经常会遇到需要获取用户屏幕分辨率的需求，比如根据屏幕大小适配不同的页面布局、统计用户设备屏幕信息等场景。JavaScript提供了原生的属性来支持获取屏幕分辨率，使用起来非常简单。

核心属性介绍

要获取屏幕分辨率，我们主要使用window.screen对象下的两个属性：

• screen.width：返回屏幕的宽度，单位是像素，表示屏幕水平方向的总像素数。
• screen.height：返回屏幕的高度，单位是像素，表示屏幕垂直方向的总像素数。

这两个属性返回的是设备屏幕的物理分辨率，不会因为浏览器窗口的大小变化而改变，只要设备屏幕本身的分辨率不变，获取到的值就会保持一致。

完整代码示例

下面的代码演示了如何获取并打印屏幕的宽高分辨率：

// 获取屏幕宽度
const screenWidth = window.screen.width;
// 获取屏幕高度
const screenHeight = window.screen.height;
// 拼接分辨率字符串
const resolution = `${screenWidth} x ${screenHeight}`;
// 打印结果到控制台
console.log(`当前屏幕分辨率为：${resolution}`);
// 也可以将结果显示在页面上
document.body.innerHTML = `<p>当前屏幕分辨率为：${resolution}</p>`;

运行上述代码后，控制台会输出类似当前屏幕分辨率为：1920 x 1080的内容，同时页面正文也会显示对应的分辨率信息。如果需要在不同场景下使用分辨率数值，也可以直接调用screen.width和screen.height单独获取宽高值进行后续逻辑处理。

注意事项

需要注意区分screen对象和window对象下的其他尺寸属性：

• window.innerWidth和window.innerHeight获取的是浏览器窗口内部的可视区域尺寸，会随着窗口大小缩放而变化，和屏幕分辨率无关。
• 部分高DPI屏幕（比如苹果Retina屏）可能会因为系统缩放设置，导致screen.width返回逻辑分辨率而非物理分辨率，如果需要获取物理分辨率，可以结合window.devicePixelRatio属性计算，公式为：物理宽度 = screen.width * devicePixelRatio。

如果需要根据分辨率做响应式适配，更推荐优先使用CSS媒体查询，JavaScript获取分辨率的方式更适合需要做设备信息统计、或者需要动态计算非布局类逻辑的场景。

JavaScript获取屏幕分辨率screen.widthscreen.heightdevicePixelRatio响应式适配 本作品最后修改时间：2026-05-24 01:13:33