屏幕分辨率与浏览器视口的区别
在进行前端开发和网页设计时，正确区分“屏幕分辨率”和“浏览器视口”至关重要。屏幕分辨率反映的是显示器硬件的物理像素矩阵大小（通过本地 window.screen 对象获取）。
相比之下，浏览器视口（Viewport）指的是当前浏览器窗口内，网页内容实际可用的渲染区域大小。当您调整浏览器窗口的宽窄，或者在侧边打开开发者工具栏时，视口尺寸会实时发生改变，而物理屏幕分辨率则始终保持不变。响应式设计正是依赖视口尺寸来调整页面布局的。
设备像素比（DPR）与高清屏幕
在使用4K显示器或视网膜（Retina）屏幕时，您可能会发现检测出的屏幕宽度远小于硬件说明书上的标称值。这是因为现代操作系统为了保证文字和界面的易读性，默认开启了缩放机制，浏览器读取到的是CSS逻辑像素而非物理像素。
本工具通过读取 window.devicePixelRatio 来获取当前屏幕的设备像素比（DPR）。将检测到的CSS逻辑像素乘以该设备像素比，即可得出真实的物理像素。前端工程师通常利用这一特性，结合媒体查询来为高分屏提供两倍或三倍的高清图片资源，从而避免图像模糊。
纯前端检测，保障数据隐私
本工具基于纯客户端JavaScript技术运行，直接在您的浏览器中调用本地DOM API（如 window.screen.availWidth）来读取系统UI（如任务栏、程序坞）之外的可用屏幕区域。
这意味着所有环境数据的采集和计算都在您的设备上本地完成，没有任何信息会被上传至服务器，充分保障您的隐私安全。需要注意的是，受限于浏览器的安全沙盒与隐私策略，工具无法越权探测外接多显示器的排列方式，且部分浏览器可能会限制对真实色彩深度或屏幕刷新率的读取。
常见问题
为什么我的4K高清显示器检测出的宽度比实际小？
这是因为操作系统默认开启了显示缩放（例如150%或200%）。浏览器向网页报告的是CSS逻辑像素而非真实的物理像素。你可以通过将显示的宽度乘以“设备像素比（DPR）”来计算出真实的物理分辨率。
进行响应式网页设计时应该参考哪个尺寸？
应该主要参考“浏览器视口（Viewport）”尺寸。视口尺寸反映了网页内容真正可以使用的显示区域，这也是CSS媒体查询（Media Queries）进行断点判断所依据的宽度。
如何确保图片在视网膜（Retina）屏幕上显示清晰？
在设备像素比（DPR）大于1的屏幕上，按原尺寸渲染普通图片会导致画面模糊。建议准备两倍或三倍分辨率的图片源，并通过CSS限制其显示尺寸，或者使用HTML的 `<picture>` 标签配合 `srcset` 属性让浏览器按需加载。
什么是“可用屏幕区域”？
可用屏幕区域是指物理屏幕总尺寸减去操作系统固定界面（如Windows的底部任务栏或macOS的程序坞）之后，应用程序最大化时可以实际占用的空间大小。
为什么工具有时无法获取屏幕刷新率或色彩深度？
此工具完全依赖您的浏览器所提供的JavaScript API。如果出于隐私保护（防止浏览器指纹追踪）的考虑，或者浏览器本身并未开放相关的硬件接口，部分高级显示参数（如刷新率）将无法被读取。
发现问题或有改进建议？ 告诉我们