🖥️ 屏幕分辨率与浏览器信息检测
一键检测你的屏幕分辨率、浏览器视口、设备像素比 DPR、颜色深度、宽高比、触摸支持、操作系统与浏览器版本、 时区语言、网络类型、CPU 核心数等信息。视口数据随窗口缩放实时更新，并高亮显示当前命中的响应式断点。 纯前端本地检测，数据不上传。
当前浏览器视口（拖动窗口大小实时变化）
— × —
—
📱 常见设备分辨率对照表
CSS 像素是网页布局使用的逻辑像素，物理像素 = CSS 像素 × DPR。做移动端适配时应以 CSS 像素为准。
| 设备 | CSS 像素 (pt) | DPR | 物理像素 (px) | 类型 |
|---|---|---|---|---|
| iPhone SE (2/3代) | 375 × 667 | 2 | 750 × 1334 | 手机 |
| iPhone 15 / 15 Pro | 393 × 852 | 3 | 1179 × 2556 | 手机 |
| iPhone 15 Plus / 15 Pro Max | 430 × 932 | 3 | 1290 × 2796 | 手机 |
| iPhone 14 / 13 / 12 | 390 × 844 | 3 | 1170 × 2532 | 手机 |
| 华为 Mate 60 Pro | 412 × 892 | 3 | 1260 × 2720 | 安卓旗舰 |
| 小米 14 | 393 × 852 | 3 | 1200 × 2670 | 安卓旗舰 |
| 三星 Galaxy S24 | 360 × 780 | 3 | 1080 × 2340 | 安卓旗舰 |
| iPad Pro 11" | 834 × 1194 | 2 | 1668 × 2388 | 平板 |
| iPad Pro 12.9" | 1024 × 1366 | 2 | 2048 × 2732 | 平板 |
| iPad 10.2" | 810 × 1080 | 2 | 1620 × 2160 | 平板 |
| MacBook Air 13" (M2/M3) | 1470 × 956 | 2 | 2560 × 1664 | 笔记本 |
| MacBook Pro 14" | 1512 × 982 | 2 | 3024 × 1964 | 笔记本 |
| MacBook Pro 16" | 1728 × 1117 | 2 | 3456 × 2234 | 笔记本 |
| 1080P 显示器 (FHD) | 1920 × 1080 | 1 | 1920 × 1080 | 显示器 16:9 |
| 2K 显示器 (QHD) | 2560 × 1440 | 1 | 2560 × 1440 | 显示器 16:9 |
| 4K 显示器 (UHD) | 1920 × 1080 | 2 | 3840 × 2160 | 显示器 16:9 |
| 2K 带鱼屏 (UWQHD) | 3440 × 1440 | 1 | 3440 × 1440 | 显示器 21:9 |
| 1366×768 老旧笔记本 | 1366 × 768 | 1 | 1366 × 768 | 笔记本 |
📐 响应式断点参考（高亮为当前视口命中）
当前视口宽度：— px，缩放窗口可实时观察断点切换。
Bootstrap 3 断点
| 断点 | 条件 | 典型设备 | 容器宽度 |
|---|
Tailwind CSS 断点
| 断点 | 条件 | 媒体查询 | 典型设备 |
|---|
💡 使用小贴士
- screen 与 window 的区别：
screen.width是整块屏幕，window.innerWidth是浏览器可视区域（含滚动条），documentElement.clientWidth不含滚动条——CSS 媒体查询在多数浏览器按后者判断。 - DPR 大于 1 表示高清屏，切图需准备 2x / 3x 素材，否则位图会发虚。
- 浏览器页面缩放会改变 devicePixelRatio 与 innerWidth，测试断点时请先按 Ctrl+0 恢复 100%。
- UA 检测结果仅供参考：部分浏览器会伪装 UA，Chromium 内核浏览器 UA 中普遍带 Safari 与 Chrome 字样。
navigator.deviceMemory与navigator.connection仅 Chromium 系支持，Safari / Firefox 会显示「不支持」。- 所有检测均在浏览器本地完成，不会向服务器发送任何设备信息。
🚀 你可能也用得上
📘 使用说明
- 打开页面即自动检测，无需任何操作
- 缩放浏览器窗口，视口尺寸与断点高亮会实时变化
- 对照设备分辨率表确认你的设备型号参数
- 查看断点表判断当前视口落在哪个响应式区间
- 点击一键复制，把全部信息粘贴给同事排查兼容问题
❓ 常见问题
Q: 屏幕分辨率和视口尺寸为什么不一样？
A: 屏幕分辨率是显示器的物理规格，视口是浏览器窗口中真正用来渲染网页的区域，要扣掉浏览器地址栏、书签栏、滚动条和任务栏。做响应式布局时，CSS 媒体查询依据的是视口宽度而非屏幕分辨率。
Q: DPR 设备像素比是什么意思？
A: DPR 表示 1 个 CSS 像素对应几个物理像素。普通显示器 DPR 为 1，苹果 Retina 屏和多数高端手机为 2 或 3。这就是为什么要为高清屏准备 2x、3x 的图片资源，否则图片会显得模糊。
Q: 为什么手机屏幕写着 1170×2532，浏览器却显示 390×844？
A: 因为该设备 DPR 为 3。1170÷3=390，2532÷3=844，浏览器报告的是 CSS 像素（逻辑像素），而参数表上写的是物理像素。写 CSS 时用逻辑像素，准备图片素材时要乘以 DPR。
Q: 检测结果准确吗？会不会被浏览器伪装？
A: 常规情况下准确。但隐私保护模式、部分浏览器的指纹防护功能、以及开发者工具的设备模拟模式都可能返回伪造值。另外 navigator.deviceMemory 等新 API 在 Safari 和 Firefox 上不被支持，会显示“不支持”。
Q: 响应式断点该怎么选？
A: 不要盯着具体设备型号定断点，而应该看内容在什么宽度下开始变得难看。常用参考值是 768px（平板）、992px（小屏笔记本）、1200px（桌面）。移动优先的写法用 min-width，从窄屏往宽屏逐层加样式。
Q: 这些信息会被记录吗？
A: 不会。所有数据都是浏览器 JavaScript 在你本地读取并直接渲染到页面上，没有任何一次网络请求把它们发送出去。
