免费响应式设计测试器：预览移动端、平板和桌面视口

输入 URL，选择预设的 CSS 视口或自定义宽高，然后在 iframe 中查看页面。此工具用于检查所选尺寸下的布局行为，不会模拟真实物理设备。

某些网站会通过 X-Frame-Options 或 Content-Security-Policy 等安全标头阻止 iframe 加载。浏览器窗口较窄时，预览的可视区域也可能受到限制。

设备预设

自定义尺寸

当前尺寸：

响应式测试清单

每次切换视口尺寸后按这份简短清单检查。它帮助你发现布局问题，但单一预览尺寸不能证明所有设备都能正常工作。

  1. 加载包含真实内容的页面，确认页头、主要内容和主要操作都能看到。
  2. 依次测试窄手机、较宽手机、平板、桌面宽度，以及一个横屏或低高度场景。
  3. 在每个由内容决定的 CSS 断点前后分别测试，然后对比布局变化。
  4. 检查是否出现横向溢出、文字被裁切、导航难以使用、表单异常或媒体无法缩放。
  5. 触摸、特定浏览器、缩放和限速网络行为，要在真实浏览器或设备测试环境中再次确认。
  6. 记录视口尺寸、浏览器和结果，方便之后复现修复前后的差异。

如需更完整的排错流程，请阅读 响应式调试清单 和 视口基础知识.

响应式设计提示

这个测试器能显示和不能显示什么

此工具会改变 iframe 的 CSS 宽高，帮助你检查所选视口尺寸下的布局变化。它不会复现真实设备的 DPR、触摸输入、浏览器界面、用户代理或网络条件。触摸和设备特定行为请在真实硬件或专用设备测试环境中确认。

可测试的视口宽度

  • 小型 CSS 视口示例： 320px、360px、375px、390px、428px
  • 平板 CSS 视口示例： 768px、820px、834px、1024px
  • 桌面 CSS 视口示例： 1280px、1366px、1440px
  • 宽屏 CSS 视口示例： 1536px 及以上

测试技巧

  • 测试真实内容而非占位符，以确保布局能够处理各种内容长度
  • 检查导航菜单在小屏幕上是否易于使用
  • 确保表单元素在所有设备上都可用且易于填写
  • 请在真实触摸设备上确认触摸交互；此预览不提供触摸输入
  • 检查图片和媒体是否正确缩放
  • 需要测试加载行为时，请使用浏览器开发者工具进行网络限速；此预览不模拟网络条件
  • 通过确保文字大小和行高在最小的移动屏幕上仍然清晰易读来验证字体可读性
  • 在每个由内容决定的断点前后分别测试，确认布局在预期宽度发生变化

常见问题

为什么某些网站无法在测试器中加载？

许多网站出于安全原因设置了X-Frame-Options或Content-Security-Policy头，禁止其在iframe中被加载。这是一种防止点击劫持等攻击的安全措施。对于这些网站，您可能需要使用浏览器的开发者工具或其他方法进行测试。

测试器中显示的网站与真实设备上有什么不同？

此测试器主要预览不同的 CSS 视口尺寸，无法完整复现真实设备的触摸交互、设备像素比或特定浏览器行为。最终测试请在真实设备上验证设计。

如何测试特定的媒体查询断点？

使用自定义尺寸功能输入您的媒体查询断点值。例如，如果您有一个在768px宽度处的断点，可以输入767px和768px来测试断点两侧的布局变化。

相关资源