screen.width 和 screen.height 返回设备物理分辨率而非视口尺寸，其值为原始像素宽高，与 window.innerwidth/innerheight（css 像素）不同，误用于响应式判断会导致高 dpr 设备适配失准。
screen.width 和 screen.height 返回设备物理分辨率，不是视口尺寸
这两个属性返回的是用户设备屏幕的原始像素宽度和高度，比如一台 15 英寸 MacBook Pro 可能返回 screen.width = 1680、screen.height = 1050；而 iPhone 14 Pro 在竖屏时可能返回 screen.width = 1170、screen.height = 2532。注意：这跟 window.innerWidth / window.innerHeight 完全不同——后者反映的是当前浏览器窗口（含缩放）的 CSS 像素尺寸。
常见误用场景：用 screen.width 判断移动端布局，结果在高 DPR 设备（如 Retina 屏）上判断失准，因为页面实际渲染宽度远小于此值。
- 不要用
screen.width 当作“是否是手机”的依据，应优先查 <code>matchMedia或window.innerWidth - 若需适配高 DPR 屏幕，应结合
window.devicePixelRatio计算真实物理像素密度 - 部分 Android 浏览器（尤其旧版 WebView）会把状态栏/导航栏高度计入
screen.height，导致值略大于标称分辨率
screen.availWidth 和 screen.availHeight 返回可用工作区尺寸
这两个属性减去了操作系统任务栏、Dock、菜单栏等系统 UI 占用的空间。例如 Windows 上有任务栏时，screen.availHeight 通常比 screen.height 少 40–50px；macOS 上 Dock 隐藏时二者可能相等，显示时则差出约 30px。
它们适合用于 window.open() 弹窗定位，避免新开窗口被系统 UI 遮挡：
const w = 800, h = 600;
const left = (screen.availWidth - w) / 2;
const top = (screen.availHeight - h) / 2;
window.open(url, '_blank', `width=${w},height=${h},left=${left},top=${top}`);
-
screen.availWidth和screen.availHeight在 iOS Safari 中始终等于screen.width/screen.height（iOS 不暴露系统 UI 占用信息） - 某些 Linux 桌面环境（如 GNOME）下，多显示器配置可能导致
avail值与主屏不一致，需配合screen.left/screen.top使用 - Electron 应用中该值反映的是主显示器工作区，而非当前窗口所在屏幕
screen.orientation 用于监听屏幕方向变化，但需权限且兼容性有限
screen.orientation 是一个 ScreenOrientation 对象，提供 angle、type（如 "portrait-primary"）以及 onchange 事件。但它不是所有浏览器都默认开放——Chrome 和 Edge 要求页面处于全屏或已获 screen-wake-lock 权限；Safari 目前完全不支持该 API。
更稳妥的方向检测方式仍是监听 window.resize 并比较 window.innerWidth 与 window.innerHeight：
function checkOrientation() {
if (window.innerWidth > window.innerHeight) {
console.log('landscape');
} else {
console.log('portrait');
}
}
window.addEventListener('resize', checkOrientation);
- 调用
screen.orientation.lock('landscape')会触发用户权限提示，且仅在安全上下文（HTTPS 或 localhost）中生效 -
screen.orientation.type在页面刚加载时可能为null，需延迟读取或监听onchange - 安卓原生 WebView 中该 API 行为不稳定，部分版本返回固定值
"portrait-primary"即使设备已横屏
别依赖 screen.colorDepth 或 screen.pixelDepth 做功能降级
screen.colorDepth 和 screen.pixelDepth 大多返回 24（即 8 位/通道），现代设备基本都支持真彩色，这两个值已失去区分能力。历史上曾用于判断是否启用抗锯齿或渐变，但现在毫无意义。
真正影响渲染质量的是 window.devicePixelRatio 和 matchMedia('(prefers-reduced-motion)') 等现代特性检测手段。
- 几乎所有桌面浏览器和主流移动浏览器都返回
screen.colorDepth === 24，哪怕设备实际支持 10bit HDR - 某些 Chromium 衍生浏览器（如 Brave）会将
screen.pixelDepth固定为32，与硬件无关 - 试图用它做“低端机降级”逻辑，大概率误伤现代中端设备，且无法反映 GPU 或内存真实负载
真正要拿屏幕信息做决策时，优先级应该是：window.matchMedia > window.innerWidth > window.devicePixelRatio > screen.width。screen 对象里多数属性反映的是操作系统层的静态硬件指标，对前端运行时行为的指导意义很弱，容易成为过早优化的陷阱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
