响应式断点测试
实时监控视口尺寸与断点命中，内置主流框架断点预设与媒体查询代码。
隐私安全：所有处理均在您的浏览器本地完成，数据绝不上传当前视口
🔒 全部在本地完成，不上传正在读取视口信息…
- 设备像素比 DPR
- —
- 屏幕方向
- —
- 可视视口
- —
- 页面缩放
- —
- 滚动条宽度
- —
- 屏幕分辨率
- —
断点标尺
量程 —标尺为线性映射；游标为当前视口宽度，刻度为所选框架的各断点位置。
断点配置
—
媒体查询命中状态
—| 断点 | 范围 | min-width | max-width | 状态 |
|---|
当前框架没有可用断点，请切换到自定义并添加断点。
内嵌 iframe 预览
iframe 内部媒体查询真实生效预览内容由本页内联生成（srcdoc），不请求任何外部地址；示例卡片会按 iframe 宽度切换列数。
断点参考对照
常见设备尺寸
工作原理
- 1打开页面即读取当前视口：以不含滚动条的 clientWidth 作为宽度口径，与 CSS 媒体查询保持一致
- 2对每个断点调用 matchMedia 判定 (min-width)/(max-width) 是否命中，而不是手工比较 window.innerWidth
- 3窗口缩放与可视视口变化时用 requestAnimationFrame 节流更新标尺、命中状态与结论文案
- 4切换到内嵌预览时，把示例页写入 iframe 的 srcdoc 并设置其宽度，iframe 内部的媒体查询按该宽度真实生效
- 5可自定义断点名称与范围（本地保存到 localStorage），并复制生成的媒体查询代码或框架类名提示
常见问题
为什么界面显示的宽度和我用 window.innerWidth 看到的不一样？
window.innerWidth 包含垂直滚动条宽度（约 15~17px），而 CSS 媒体查询的宽度不含滚动条。本工具以 document.documentElement.clientWidth 作为显示口径，并用 matchMedia 判定命中，因此界面宽度与媒体查询结果一致。
点击设备按钮能真实改变浏览器窗口大小吗？
不能。浏览器不允许网页用脚本修改窗口尺寸。本工具的做法是在页面内提供一个可调宽度的 iframe，把示例页渲染在其中——iframe 内部的媒体查询会按其自身宽度生效，从而实现真实可用的断点模拟。
为什么用 iframe 预览外部网站会失败？
出于安全策略，许多站点通过 X-Frame-Options 或 CSP 的 frame-ancestors 禁止被嵌套。本工具默认预览内置的示例页（本地 srcdoc 生成，不发任何网络请求），因此不受该限制；也不建议在本地工具中加载外部页面。
设备像素比（DPR）和断点判定有关系吗？
没有直接关系。断点由 CSS 像素宽度决定，而 DPR 只是物理像素与 CSS 像素的比值（影响清晰度）。浏览器缩放会同时改变 DPR 与可视宽度，所以本工具把 DPR、页面缩放和可视视口尺寸一并展示，便于对照排查。
自定义断点会保存吗？保存在哪里？
会。自定义断点保存在浏览器本地 localStorage 中，刷新页面后仍然存在；清理浏览器数据会丢失。数据始终留在你的浏览器里，不会上传到任何服务器。
复制的媒体查询代码可以直接使用吗？
可以。复制出的内容为标准的 @media (min-width: Npx) { } 形式，可直接粘贴到 CSS 文件中。切换框架时还会给出该框架对应的类名或 API 提示（如 Tailwind 的 md: 前缀、Bootstrap 的 col-md-6）。