screen对象是浏览器全局对象，用于获取设备屏幕信息；screen.width/height返回逻辑分辨率，screen.availWidth/availHeight返回扣除系统UI后的可用区域；其值固定不随窗口变化，适合统计分析而非响应式布局。
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 相关尺寸
初学者容易混淆三者用途：
立即学习“Java免费学习笔记（深入）”；
-
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）。
