📐 屏幕分辨率检测
Detect your screen resolution, viewport size, device pixel ratio, color depth, and generate CSS media queries. Includes safe area detection for notched devices.
常见问题
- Q：viewport 尺寸和 screen 尺寸有什么区别？
- A>viewport（视口）是浏览器中显示网页的区域大小，会随浏览器窗口大小变化。screen（屏幕）是设备的物理屏幕尺寸（逻辑像素），固定不变。在移动浏览器中，viewport 通常小于 screen（因为浏览器地址栏等 UI 占据空间）。
- Q：为什么 iPhone 14 的屏幕宽度显示为 390px 而不是 1170px？
- A>因为 DPR（设备像素比）的存在。iPhone 14 的物理像素为 1170×2532，DPR 为 3。CSS 使用逻辑像素（390×844），1 个 CSS 像素由 3×3=9 个物理像素渲染。这样做是为了保持不同设备上元素的大小一致。
- Q：CSS 媒体查询是基于哪个尺寸？
- A>媒体查询基于 viewport 尺寸（即 window.innerWidth），不是物理屏幕尺寸。这就是为什么调整浏览器窗口大小时，媒体查询会实时切换。移动端的 viewport 受 viewport meta 标签控制。
- Q：如何确定响应式设计应该设置哪些断点？
- A>现代最佳实践是"内容驱动断点"：逐渐缩小浏览器窗口，当布局开始变得不协调时设置断点。常见参考断点：320px（小手机）、768px（平板）、1024px（小桌面）、1440px（大桌面）。但最终应根据实际内容决定。
- Q：DPR 为 2 意味着什么？需要提供多大的图片？
- A>DPR=2 表示每个 CSS 像素由 2×2=4 个物理像素渲染。如果图片的 CSS 尺寸是 200×200px，应提供 400×400px 的图片资源。使用 srcset 属性： <img srcset="img-1x.jpg 1x, img-2x.jpg 2x"> ，浏览器自动选择。
- Q：免费屏幕分辨率检测工具需要注册吗？
- A：不需要。本屏幕分辨率检测工具完全免费开放使用，无需注册账号，无需下载安装，打开浏览器即可使用，无任何使用次数限制。
- Q：屏幕分辨率检测工具支持哪些浏览器？
- A：支持Chrome、Firefox、Safari、Edge等所有主流现代浏览器的最新版本。建议使用Chrome浏览器以获得最佳性能和兼容性体验。
- Q：在线屏幕分辨率检测工具的数据安全吗？
- A：非常安全。我们的屏幕分辨率检测工具采用纯前端技术实现，所有数据处理都在您的浏览器本地完成，不会上传到任何服务器。您可以放心处理包含敏感信息的数据。