DEVICE WALL 设备墙 / 06

响应式测试

Q: 为什么有些网址在预览框里是空白？

多数是目标站通过 X-Frame-Options 或 CSP frame-ancestors 禁止被嵌入，这是对方的安全策略，不代表页面有问题。本页会明确给出目标站拒绝嵌入的提示，不会把它算作适配通过。

Q: iframe 预览和真机一样吗？

不完全一样。宽度与 CSS 媒体查询一致，但安全区、系统字体、触控反馈、滚动惯性与地址栏收起行为都不会模拟。建议先用本页排查横向溢出，再拿真机复核。

Q: 怎么判断有没有横向溢出？

在预览框里左右拖动，或看页面是否出现水平滚动条；常见成因是固定宽度的表格、未加 max-width 的图片、以及不换行的长英文串。自检清单第一项就是这条。

Q: 常用断点该如何选？

没有统一标准，常见做法是 576、768、992、1200、1400 五档。标尺把这些值画出来，建议在每档前后各看一次，确认没有元素在临界宽度突然错位。

改完页面想知道手机会不会横向滚动，不必先掏真机。填一个完整网址，一屏里并排摆出手机、平板、桌面多档视口，还能按五项清单逐条自检并生成报告。

3并排视口

5常用断点

0/5自检完成

网址只接受 http / https，iframe 由你的浏览器直接请求，本页不代理、不记录。跨域站点可能拒绝嵌入。

断点标尺建议在每档前后各看一次

缩放 32% 自定义宽 px

设备墙

点上方「开始预览」后创建预览框

若某框空白，多为目标站设置了 X-Frame-Options 或 CSP frame-ancestors 拒绝嵌入，属对方安全策略，不代表适配失败。iframe 已启用懒加载。

五项适配自检

AI 断点适配建议

完成一次预览或自检后点下方按钮，点击会先弹出点选验证码，通过后才发出请求。

批量网址对照

网址（转义后展示）	协议校验	备注

📱视口与断点口径 CSS 像素、iframe 限制与自检项

视口口径	移动浏览器的视觉视口与布局视口不同，页面是否声明 viewport meta 会直接决定预览宽度；本页按 CSS 像素标注每个设备框。
设备预设	内置 360×800、390×844、414×896、768×1024、1024×768、1440×900 六档，覆盖常见手机、平板与桌面断点。
iframe 限制	跨域站点可能通过 X-Frame-Options 或 CSP 拒绝被嵌入；本页把无法加载判为「目标站拒绝嵌入」，不会伪装成适配成功。
断点标尺	标尺标出 576 / 768 / 992 / 1200 / 1400 等常用断点，用来核对元素在断点附近是否跳变。
检查清单	提供横向溢出、文字过小、点击区过小、图片未自适应、固定宽度容器五项自检，逐项可勾选并生成检查报告。
批量与转义	可一次录入最多 8 个网址做多尺寸对照，网址会做协议白名单校验（仅 http/https），导出按 CSV 双引号转义。

这个工具解决什么问题

改完页面想知道手机会不会横向滚动，不一定非要掏出真机。这个响应式测试在一屏里并排摆出手机、平板、桌面多档视口，填入网址即可同时预览，底部断点标尺把常用断点一次标清；还能按五项清单逐条自检并生成报告。支持横竖屏切换、缩放对照、自定义视口、批量网址与 CSV 导出，跨域拒绝嵌入会明确提示原因。

四条实用原则

先看有没有横向溢出：这是移动端最常见的致命问题，通常来自固定宽度表格或长英文串。
在断点两侧各看一次：布局跳变往往发生在临界值，别只测一个整齐的整数宽度。
真机仍不可省：iframe 预览不模拟安全区、字体渲染与触控手感，最后仍要在实机上确认。
网址要带协议：只填域名会被判为相对路径，页面要求以 http:// 或 https:// 开头。

按这几步用

填网址：在首屏输入框填入完整网址，或用示例页一键填入可用的本地预览地址。
选设备组合：勾选要并排预览的手机、平板、桌面档位，也可自定义宽高。
切横竖屏与缩放：一键交换宽高，或调整缩放比例观察长页面整体布局。
按清单自检：逐项勾选溢出、字号、点击区、图片自适应与固定宽度检查，生成文字报告。
批量对照与导出：把多个网址加入批量表，导出检查结果 CSV 或复制分享链接。

小提示

预览通过 iframe 直接由你的浏览器发起，本页不代理、不抓取、不存储目标网页内容；目标站设置 X-Frame-Options 或 CSP frame-ancestors 时会拒绝嵌入，属正常安全策略。接 AI 适配建议（点击先完成人机验证）。

更新记录

v1.0 2026-11-11 工具上线：六档设备视口并排预览、横竖屏切换、自定义宽高与缩放、常用断点标尺、五项适配自检与报告生成、批量网址对照、跨域拒绝嵌入提示、CSV 转义导出、URL 参数分享；接 AI 断点适配建议。

常见问题

为什么有些网址在预览框里是空白？

多数是目标站通过 X-Frame-Options: DENY / SAMEORIGIN 或 CSP frame-ancestors 禁止被嵌入，这是对方的安全策略，不代表你的页面有问题。本页会明确给出「目标站拒绝嵌入」提示，不会把它算作适配通过。

iframe 预览和真机一样吗？

不完全一样。宽度与 CSS 媒体查询一致，但安全区、系统字体、触控反馈、滚动惯性与浏览器地址栏收起行为都不会模拟。建议先用本页快速排查横向溢出，再拿真机复核。

怎么判断有没有横向溢出？

在预览框里左右拖动，或看页面是否出现水平滚动条；常见成因是固定宽度的表格、未加 max-width:100% 的图片、以及不换行的长英文串。清单第一项就是这条。

常用断点该如何选？

没有统一标准，常见做法是 576 / 768 / 992 / 1200 / 1400 五档。标尺把这些值画出来，建议在每档的前后各看一次，确认没有元素在临界宽度突然错位。

批量网址表有什么用？

可以把首页、列表页、详情页等一次录入，在同一组视口下轮流预览并逐行记下检查结果，最后导出一份 CSV 报告交给开发同事；网址只接受 http 与 https 协议。

预览会上传我的网址吗？

不会。iframe 由浏览器直接向目标地址请求，本页面既不代理也不记录网址；分享链接中的网址参数只用于回填输入框。

💬 留言板 0

全部留言需审核通过后展示

💬

还没有留言，来抢沙发吧！