获取屏幕分辨率与可用宽高方法

本文详解了JavaScript中`screen`对象的`width`、`height`、`availWidth`和`availHeight`四个关键属性——它们分别代表设备逻辑分辨率和扣除系统UI后的可用屏幕区域，强调其值固定不变、不随窗口缩放而变化的特性，并明确指出这些属性适用于用户设备统计、全屏初始化等场景，而非响应式布局；文章还清晰对比了`screen`、`window`和`document`三类尺寸API的本质区别与适用边界，帮助开发者避免常见误区，做出更精准的技术选型。

screen 对象是浏览器提供的全局对象，用于获取用户设备的屏幕信息，包括分辨率、可用区域尺寸等。它不依赖 DOM 加载，可在脚本任何位置直接访问。

screen.width 与 screen.height：物理/逻辑屏幕总分辨率

这两个属性返回的是设备屏幕的完整像素宽度和高度（单位：px），通常对应系统设置的“显示缩放”下的逻辑分辨率（非真实物理像素）。

• 在 Windows 高 DPI 设备上，若系统缩放设为 125%，screen.width 返回的是缩放后的逻辑宽度（如 1536），而非原始物理宽度（如 1920）
• 在 macOS Retina 屏上，它们一般反映的是 CSS 像素值（即逻辑像素），不是设备像素（device pixels）
• 该值不会随浏览器窗口缩放或标签页切换而变化，始终代表整个屏幕能力

screen.availWidth 与 screen.availHeight：任务栏/菜单栏扣除后的可用区域

这两个属性表示浏览器**可安全使用的最大显示区域尺寸**，已自动减去操作系统任务栏、Dock、菜单栏等固定 UI 占用的空间。

• Windows 下，若任务栏在底部且高度为 48px，则 screen.availHeight ≈ screen.height - 48
• macOS 全屏模式下，availWidth/availHeight 通常等于 width/height；非全屏时会扣除顶部菜单栏和 Dock 高度
• 注意：它们不考虑浏览器自身的地址栏、书签栏等——这些属于窗口级限制，需用 window.innerWidth/innerHeight 判断

区分 screen、window 和 document 相关尺寸

初学者容易混淆三者用途：

• screen.* → 描述设备屏幕能力（只读，全局固定）
• window.innerWidth/innerHeight → 当前浏览器窗口的可视区域大小（含滚动条，随窗口缩放实时变化）
• document.documentElement.clientWidth/clientHeight → 渲染视口尺寸（不含滚动条，受 CSS box-sizing 和 zoom 影响）

例如：打开一个 800×600 的弹出窗口，screen.width 可能是 1920，window.innerWidth 是 800，screen.availWidth 可能是 1872（扣除了任务栏）。

实际使用建议

多数前端场景中，不推荐仅靠 screen 对象做响应式布局或适配判断，原因如下：

• 用户可能使用多显示器，但 screen 只反映主屏信息
• 移动端浏览器（尤其 iOS Safari）对 screen 的实现存在兼容性差异，部分返回桌面端默认值
• 真正影响页面渲染的是视口（viewport），应优先使用 matchMedia、CSS 媒体查询或 window.innerWidth

screen 更适合用于统计分析（如上报用户设备屏幕分布）、全屏初始化预判、或辅助判断是否具备高分屏显示条件（结合 window.devicePixelRatio）。

到这里，我们也就讲完了《获取屏幕分辨率与可用宽高方法》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！