Screen 对象
浏览器中 `screen` 对象的物理屏幕尺寸、可用区域和像素信息说明。
#tech / dev / frontend
#type / concept
#status / growing
#resource / javascript
#platform / browser
[!info] related notes
- 所属 MOC: javascript-in-browser-moc
- 上位主题: javascript-in-browser
- 上位主题: javascript-bom
- 前置概念: window-object
Screen 对象
screen 是浏览器暴露出来的物理屏幕信息对象。它描述的是设备屏幕，而不是当前网页实际可见视口。
一句话定义
screen 用来表示设备屏幕的整体尺寸与可用区域信息，不直接等于当前页面布局区域。
它解决什么问题
当你需要读取：
- 设备屏幕宽高
- 屏幕可用区域
- 一些和显示设备有关的基础信息
可以从 screen 进入。
常见属性
screen.widthscreen.heightscreen.availWidthscreen.availHeightwindow.devicePixelRatio（常和 screen 信息一起理解）
例如：
console.log(screen.width, screen.height)
console.log(screen.availWidth, screen.availHeight)
console.log(window.devicePixelRatio)width/height 和 availWidth/availHeight
width / height
表示物理屏幕的整体宽高信息。
availWidth / availHeight
表示减去系统 UI 占用后，浏览器可使用的屏幕区域。
不同操作系统和设备上，这些值的表现会有所差异。
和视口的区别
这是最常见的混淆点。
screen.*说的是设备屏幕window.innerWidth / innerHeight说的是当前页面视口
也就是：
- 做响应式布局更常看
innerWidth - 看设备屏幕信息才看
screen
最小示例
if (screen.width < 768) {
console.log('small device screen')
}
console.log('viewport:', window.innerWidth)
console.log('screen:', screen.width)使用边界
screen 适合做：
- 轻量设备信息判断
- 和显示相关的辅助逻辑
但不适合直接替代：
- 响应式布局判断
- 组件实际渲染尺寸判断
如果你真正关心页面当前可见区域，更应该看：
window.innerWidthwindow.innerHeight- 媒体查询
- 元素自身尺寸
常见误区
- 把
screen.width当成当前页面宽度 - 以为
screen可以精确代表浏览器内容区域 - 忽略缩放、设备像素比、浏览器 UI 对最终显示的影响
最短记忆方式
screen 看的是设备屏幕，window.innerWidth 看的是当前页面视口，二者不是一回事。