浏览器视口 · 网页可用内容区
zoom_in—
— × — px
window.innerWidth × window.innerHeight（CSS 像素，随窗口与缩放实时变化）
100 × 100
CSS 像素
CSS 像素
缩放测试文本：视觉上变大变小
即为浏览器页面缩放 可在地址栏设 50%~200% 观察变化
即为浏览器页面缩放 可在地址栏设 50%~200% 观察变化
desktop_windows
屏幕显示
- 屏幕分辨率—
- 可用分辨率（去任务栏）—
- CSS 逻辑分辨率—
- 色彩深度—
- 屏幕方向—
tune
缩放参数
- 设备像素比 devicePixelRatio—
- 系统显示缩放（估算 ①）—
- 浏览器页面缩放（估算 ②）—
- 视觉视口缩放 visualViewport.scale—
- 物理像素 = CSS 像素 × DPR—
web
浏览器窗口
- 窗口尺寸 window.outerWidth—
- 100% 等效视口（估算 ③）—
- 文档可用宽度 clientWidth—
- 纵向滚动条宽度—
说明：浏览器无法直接给出独立且精确的“系统缩放”与“页面缩放”，只能给出估算—— ① = devicePixelRatio ÷ 页面缩放；② = window.outerWidth ÷ window.innerWidth； ③ = 视口尺寸 × 页面缩放，即约等于 100% 缩放时的视口宽度。 devicePixelRatio 已包含「系统显示缩放 × 浏览器页面缩放」双重影响。个别数值（如滚动条宽度）在窗口未最大化时可能为 0。