视口尺寸检测器

工具简介

一个实时检测浏览器视口和屏幕参数的工具。打开页面就能看到当前设备的视口尺寸、屏幕分辨率、设备像素比、设备类型等信息，还会自动匹配响应式断点。前端开发时用来调试响应式布局很实用，也可以快速了解任意设备的显示参数。

功能说明

视口尺寸：实时显示浏览器窗口的宽高，调整窗口大小自动更新。

屏幕信息：显示物理屏幕分辨率、可用面积、设备像素比（DPR）、颜色深度和屏幕方向。

断点检测：根据当前视口宽度，匹配常用断点（Mobile / Tablet / Desktop / Large）和 Tailwind CSS 断点（sm / md / lg / xl / 2xl），高亮当前所在区间。

设备类型识别：自动判断当前是移动设备、平板、桌面还是大屏设备，同时检测是否支持触摸。

CSS 媒体查询参考：提供完整的 CSS 媒体查询代码片段，可以直接复制到项目中使用。

一键复制：每个数据项都支持单独复制，也可以复制完整的设备信息报告。

使用方法

打开页面就能看到所有检测结果，无需任何操作。调整浏览器窗口大小，视口数据和断点匹配会实时变化。点击任意数据项旁边的复制按钮可以复制单个值，点击底部”复制完整设备报告”可以一次性获取所有信息。

隐私说明

所有检测都在浏览器中完成，不会上传任何数据到服务器。无需注册登录，不存储用户信息。

常见问题

为什么视口尺寸和屏幕尺寸不一样？ 视口是浏览器窗口的实际可用区域，屏幕是物理显示器的分辨率。如果有浏览器工具栏、任务栏等，视口会比屏幕小一些。

设备像素比（DPR）是什么意思？ DPR 是物理像素和逻辑像素的比值。DPR 为 2 表示 1 个 CSS 像素对应 2×2 个物理像素，Retina 屏幕通常 DPR 为 2 或 3。

断点检测有什么用？ 方便前端开发时了解当前窗口命中了哪些响应式断点，CSS 媒体查询可以据此写不同屏幕尺寸的样式。

数据是实时的吗？ 是的。窗口大小变化、屏幕旋转等都会自动更新数据，不需要手动刷新。

为什么选择这个工具？