添加页面
输入网址,或切换到 HTML 粘贴代码、打开 .html 文件。示例页面会演示它的用法。
输入网址或粘贴 HTML,即可在与真实手机、平板、笔记本和台式机屏幕同尺寸的框架中查看,可并排对比,也可逐个查看。
把框架拖到任意宽度、旋转、在常用断点间切换,找出横向溢出的内容,并保存你的 HTML 的截图。
正在加载测试工具…
输入网址,或切换到 HTML 粘贴代码、打开 .html 文件。示例页面会演示它的用法。
查看单台设备并拖动其边缘,或把手机、平板、笔记本和台式机并排摆放。任意一台都可以旋转。
查看内容超出屏幕宽度的警告,编辑 HTML,所有框架都会实时更新,然后保存截图。
目前使用中最窄的手机宽度为 320 到 360 CSS 像素。布局在这里没问题,几乎在哪里都没问题。
断点在设备之间同样可能出问题。从窄到宽慢慢拖动框架,留意内容跳动或重叠的那一刻。
没有 <meta name="viewport" content="width=device-width, initial-scale=1">,手机会按约 980 像素宽来排版页面再缩小,直到文字变得很小。
页面在各种尺寸下都正常后,用 WaveSpeed AI 制作它需要的图片和视频片段。
符合条件的新账号可获得 $1 免费额度,无需绑卡。 生成器需要单独的账号和积分。响应式测试工具免费使用。
免费。无需账号,设备和页面数量不限,截图没有水印,也无需安装:它在你的浏览器中运行。
输入网站地址或粘贴 HTML,然后从 40 多种手机、平板、笔记本和台式机尺寸中选择,可逐个查看或并排对比。还可以把框架拖到任意宽度、旋转或跳到常用断点。
每个框架都是一个与该屏幕 CSS 像素宽高完全一致的浏览器视口,因此你的媒体查询、布局和断点的反应与在那台设备上完全相同。
可以。粘贴 HTML 或打开 .html 文件,即可在所有尺寸下预览并实时编辑。网站通过 https 加载;本地开发服务器请使用 https 隧道,或粘贴构建后的 HTML。
能。它会标出你的 HTML 中比屏幕更宽的元素(手机上出现横向滚动的常见原因),并在缺少 viewport meta 标签时发出警告。
可以,适用于粘贴的 HTML:按设备像素比把可见区域或整页保存为 PNG,例如 393 像素宽、3x 的框架会得到 1179 像素宽的图片。
手机会把二到四个物理像素合成一个 CSS 像素。标签显示的就是这个比例,粘贴 HTML 的截图也按它保存,清晰度与真实屏幕一致。
不会。网站由你的浏览器直接从它自己的服务器加载到框架中,中间没有代理。粘贴的 HTML 和截图只保留在你的浏览器中;上次的页面和设置保存在此浏览器的本地存储中。
有些网站设置了不允许被嵌入其他页面中显示。打开“为什么是空白的?”查看网站的响应头,或者改为粘贴页面的 HTML。
粘贴 HTML 或输入网址,并排对比手机、平板和桌面效果。