在多种屏幕尺寸下测试 HTML/CSS 代码块

粘贴一段 HTML 及其相关 CSS,即可在隔离的框架(沙盒 iframe)中立即查看它在手机、平板和桌面上的显示效果;该框架无法执行脚本,也无法访问您的页面。

HTML

CSS

工作原理

您输入的 HTML 和 CSS 会被组装成一个独立的小文档,通过 srcdoc 属性注入到 <iframe> 标签中。该 iframe 处于「sandbox」模式,即与页面其余部分隔离:它无法执行脚本(不允许任何 <script>),也无法访问网站的其他部分,从而防范粘贴内容中可能存在的恶意注入风险。您可以选择预设尺寸(手机、平板、桌面),也可以输入自定义的宽度和高度,以观察代码块的响应式表现。

预览中会执行 JavaScript 吗?

不会,这是有意为之:iframe 处于沙盒模式,没有 allow-scripts 权限,因此粘贴的 HTML 中的任何 <script> 都会被忽略。只会预览 HTML 渲染效果和 CSS 的应用效果。

可以测试 CSS 媒体查询吗?

可以:您 CSS 中的 @media 规则会根据预览所设定的宽度(预设或自定义值)正常生效,与在真实浏览器中调整窗口大小时完全一致。

您的 HTML 和 CSS 绝不会发送到服务器:渲染完全在您的浏览器本地生成。