📐 浏览器分辨率检测工具

为响应式网页设计提供精准的视口参数

📏 屏幕宽度
-- px
显示器物理宽度
📐 屏幕高度
-- px
显示器物理高度
🪟 视口宽度 --
-- px
浏览器可视区域
📊 视口高度
-- px
浏览器可视区域
🔍 设备像素比
--
CSS像素与物理像素比
🎨 色彩深度
-- bit
显示色彩能力
当前可视区域比例预览（自动等比缩放）
-- × --
常用 CSS 媒体查询断点
设备类型断点范围CSS 媒体查询状态
浏览器 & 系统详细参数
可用宽度 (availWidth)--
可用高度 (availHeight)--
窗口外宽度 (outerWidth)--
窗口外高度 (outerHeight)--
水平滚动 (scrollX)--
垂直滚动 (scrollY)--
用户代理 (UA)--
页面 URL--
来源页面 (Referrer)--
语言--
时区--
在线状态--
触摸支持--
💡 响应式设计建议 移动优先(Mobile First)策略: 先为最小视口设计样式, 再用 @media (min-width: ...) 渐进增强; 当前视口宽度 window.innerWidth 是 CSS 媒体查询的依据, 而 screen.width 仅反映显示器物理尺寸(在桌面浏览器上, 二者通常不同, 因为浏览器还有标签栏/地址栏/书签栏等占用)。本页面所有数值会在窗口缩放/滚动时实时更新。