📐 在线视口尺寸检测工具

📏 实时视口检测

📊 物理像素 vs CSS像素

📋 尺寸变化历史

什么是视口尺寸检测工具

视口尺寸检测工具是一个前端开发和响应式设计必备的在线检测工具。它能实时显示当前浏览器视口的CSS像素尺寸、屏幕物理分辨率、设备像素比（DPR）等关键参数。无论是调试CSS媒体查询断点，还是验证响应式布局在不同设备上的表现，本工具都提供了即时、准确的视口信息。

检测参数说明

• 视口宽度/高度：浏览器内容区域的CSS像素尺寸（window.innerWidth / innerHeight），不含浏览器工具栏和边框
• 屏幕宽度/高度：设备屏幕的总分辨率（screen.width / screen.height），以CSS像素计
• 设备像素比（DPR）：物理像素与CSS像素的比率。Retina屏通常为2x，4K屏可能为3x或更高
• 外层宽度/高度：包含浏览器工具栏和边框的整个窗口尺寸（window.outerWidth / outerHeight）
• 视觉视口：用户当前看到的区域尺寸，移动端软键盘弹出时会变小

响应式断点参考

• XS（超小屏）：<480px — 手机竖屏
• SM（小屏）：480-767px — 手机横屏/大屏手机
• MD（中屏）：768-1023px — 平板竖屏
• LG（大屏）：1024-1279px — 平板横屏/小笔记本
• XL（超大屏）：≥1280px — 桌面显示器

使用教程

第一步：打开工具。页面加载后自动开始实时检测，所有指标立即显示当前值。无需点击任何按钮即可看到视口宽度、高度、屏幕分辨率等核心参数。

第二步：调整窗口。拖动浏览器窗口边缘改变大小，或按F12打开开发者工具并切换设备模拟模式。所有数据会实时更新，断点匹配指示器也会自动高亮对应的断点。历史记录区会保存最近5次尺寸变化。

第三步：分析结果。「物理像素 vs CSS像素」区域展示了屏幕在不同像素比下的实际表现。如果看到DPR为2而视口只有375px宽度，说明你在iPhone上——物理像素是750px，苹果的Retina渲染在375 CSS像素中显示750物理像素的内容。

第四步：复制或记录。点击「复制当前尺寸」可将当前视口信息复制到剪贴板，便于分享给团队成员或在Bug报告中提供精确的环境信息。

应用场景

响应式布局调试：在开发过程中，你需要确认CSS媒体查询是否在正确的断点触发。本工具实时显示当前视口尺寸并高亮匹配的断点，帮助你验证 @media (min-width: 768px) 等规则是否在预期范围内生效。

跨设备测试：结合Chrome DevTools的设备模拟功能，你可以快速预览网页在不同设备（iPhone、iPad、各种Android手机）上的视口表现。DPR和物理像素的对比数据帮助理解Retina屏上的渲染效果。

Bug报告：当用户报告显示问题时，本工具可以快速获取精确的视口和屏幕参数，附在Bug报告中大大缩短问题排查时间。

设计稿对接：设计师通常会按375px或1440px出设计稿。通过本工具你可以确认自己当前的视口宽度是否与设计稿匹配，从而准确判断还原度。

扩展知识

视口的历史演变：移动互联网早期，Safari使用960px的默认布局视口来渲染桌面版网页，用户需要手动缩放查看内容。Apple在iPhone发布时引入了viewport meta标签，让开发者可以控制布局视口的宽度，这成为了现代响应式设计的基石。

100vh的问题与解决方案：在移动端浏览器中，100vh并不等于用户可见区域的全高度，因为浏览器工具栏会动态显示/隐藏。Chrome为此引入了dvh（dynamic viewport height）单位，Safari则支持lvh（large）和svh（small）。本工具检测的innerHeight也受此影响，实际高度可能略小于CSS的100vh。

常见问题