HTML/CSS 预览器
使用可调整的移动端和桌面端宽度,在隔离的沙箱 iframe 中比较响应式布局。
脚本会被移除且绝不会执行。预览使用不含 allow-scripts 的沙箱 iframe。这只是布局预览,不模拟原生设备、DPR 或真实浏览器的一致行为。
移动端
桌面端
使用步骤
如何使用
- 分别粘贴 HTML 和 CSS。
- 调整移动端和桌面端视口宽度。
- 查看两个预览,并记住这只是布局近似,不是原生设备或 DPR 模拟器。
脚本绝不执行
放入 srcdoc 前会移除 script 元素和内联事件属性。每个 iframe 都使用 sandbox="",不含 allow-scripts,因此粘贴的 JavaScript 无法运行。
可调整视口宽度
为移动端和桌面端分别设置像素宽度。预览显示对应 CSS 视口宽度,同时仍位于当前浏览器窗口内。
明确限制
本工具只预览 HTML 和 CSS 布局,不模拟原生控件、DPR、触摸硬件、浏览器界面或不同真实浏览器的完全一致渲染。
常见问题
你可能还想知道
粘贴的 JavaScript 会运行吗?
不会。script 元素和内联事件处理器会被移除,iframe 也不含 allow-scripts。
这是手机或平板模拟器吗?
不是。它只改变 CSS 视口宽度,不模拟原生控件、DPR、触摸输入或浏览器差异。
代码会上传吗?
页面不会上传代码,预览在浏览器本地组装。但你的 HTML 或 CSS 中的外部 URL 仍可发起资源请求。