响应式检测工具(responsive checker)能在多个屏幕宽度下显示同一个页面。在线工具对允许嵌入框架的公开页面效果很好,但对三类页面会失败:localhost、需要登录的页面,以及发送禁止嵌入响应头的网站。框架一片空白时,原因几乎总是最后一种,十秒就能确认。对这些页面,请使用在你自己浏览器里运行的工具:Chrome DevTools的设备模式,或移动视图扩展。
不同页面用哪种检测工具
| 要检查的页面 | 在线检测工具 | 替代方案 |
|---|---|---|
| 允许嵌入的公开页面 | 可以 | 任何在线工具 |
| 禁止嵌入的页面 | 空白框架或报错 | DevTools设备模式、移动视图扩展 |
| 需要登录的预发布站点 | 通常只显示登录页 | 在已登录的标签页里使用DevTools或扩展 |
| localhost | 不行,工具的服务器访问不到 | DevTools或扩展;想用真机查看请参见在手机上测试localhost |
在线工具为什么显示空白框架
大多数在线工具把你的页面加载到iframe里。网站可以用X-Frame-Options响应头或Content-Security-Policy的frame-ancestors规则,让浏览器拒绝在框架中显示它。MDN把X-Frame-Options: DENY描述为禁止在任何框架中显示,把SAMEORIGIN描述为仅当所有父框架与页面同源时才允许。写在<meta>标签里没有效果,只有作为HTTP响应头才生效。任何工具都无法绕过,因为执行这条规则的是浏览器,不是工具。
很多大型网站都会发送其中一个响应头。我们在2026年10月28日查看时,bbc.com返回的是X-Frame-Options: SAMEORIGIN,所以无法在别人的框架里显示。这是网站自己的决定,与你的布局无关。
十秒检查网站是否允许嵌入
在终端运行下面的命令,查找这两个响应头:
curl -sI https://example.com | grep -iE "x-frame-options|content-security-policy"如果看到X-Frame-Options: DENY或SAMEORIGIN,或者包含frame-ancestors的Content-Security-Policy,在线工具就无法显示该页面。如果两者都没有,则允许嵌入。在Chrome里也可以打开DevTools,进入Network,选中页面请求,查看响应头。
如果是你自己的网站,不要为了迎合检测工具而削弱这些响应头:它们保护访问者免受点击劫持。用不需要框架的工具来测试。
框架被拦截时,使用浏览器内的工具
上面的预览也是一种在线工具:它把页面放进框架,所以有同样的限制。当网站禁止嵌入时,在线移动视图工具会明确告诉你,而不是显示空框架,解决办法就是扩展。移动视图扩展或DevTools设备模式改变的是标签页本身,所以响应头无关紧要,登录和localhost也和普通标签页一样可用。DevTools见Chrome移动模拟器指南,如何选择见移动模拟器扩展与DevTools对比。
响应式检测工具无法判断的事
只改变宽度的检测工具,等同于拖动浏览器窗口的边缘。它不会告诉你服务器是否给手机返回另一个页面,布局在内容很长或200%缩放时表现如何,也不会告诉你Safari怎样绘制它。从宽度扫描到自动截图的完整方法见如何测试响应式设计。把检测工具当作第一眼的检查,而不是验收。
常见问题
为什么响应式检测工具对我的网站显示空白页?
多数情况是你的网站发送了X-Frame-Options或禁止嵌入的CSP frame-ancestors规则。按上面的方法检查响应头。localhost和需要登录的页面失败是另一个原因:工具的服务器访问不到它们。
能用在线响应式检测工具测试localhost吗?
不能。在线工具无法访问只存在于你电脑上的地址。请在打开本地站点的标签页中使用Chrome DevTools或移动视图扩展。
只靠响应式检测工具就能验收网站吗?
不能。它只显示几个宽度下的布局。真正的验收还需要极端内容测试和真机检查,响应式测试指南对此有详细说明。
来源:MDN,X-Frame-Options(2026年10月28日查阅);2026年10月28日用curl获取的bbc.com响应头。