Nano Banana 2.1 现已上线 — Google 最新模型 | 立即体验 →
WAVESPEED AI 响应式测试 你的代码保留在你的设备上
100% 免费

免费响应式设计测试工具一次查看页面在所有屏幕尺寸下的效果。

输入网址或粘贴 HTML,即可在与真实手机、平板、笔记本和台式机屏幕同尺寸的框架中查看,可并排对比,也可逐个查看。
把框架拖到任意宽度、旋转、在常用断点间切换,找出横向溢出的内容,并保存你的 HTML 的截图。

40+ 种屏幕尺寸并排对比溢出检测
无需注册 无代理 无水印

正在加载测试工具…

粘贴的 HTML 只保留在你的浏览器中。网站直接从它们自己的服务器加载。
三个简单步骤

如何测试响应式设计

01

添加页面

输入网址,或切换到 HTML 粘贴代码、打开 .html 文件。示例页面会演示它的用法。

02

选择屏幕

查看单台设备并拖动其边缘,或把手机、平板、笔记本和台式机并排摆放。任意一台都可以旋转。

03

修复并截图

查看内容超出屏幕宽度的警告,编辑 HTML,所有框架都会实时更新,然后保存截图。

让布局在任何尺寸下都稳定的技巧

从 320 像素开始

目前使用中最窄的手机宽度为 320 到 360 CSS 像素。布局在这里没问题,几乎在哪里都没问题。

多拖动,别只选设备

断点在设备之间同样可能出问题。从窄到宽慢慢拖动框架,留意内容跳动或重叠的那一刻。

别忘了 viewport 标签

没有 <meta name="viewport" content="width=device-width, initial-scale=1">,手机会按约 980 像素宽来排版页面再缩小,直到文字变得很小。

WaveSpeed AI

从布局到视觉

页面在各种尺寸下都正常后,用 WaveSpeed AI 制作它需要的图片和视频片段。

  • 1,000+ AI 模型
  • 图片、视频和 3D
  • 按量付费

符合条件的新账号可获得 $1 免费额度,无需绑卡。 生成器需要单独的账号和积分。响应式测试工具免费使用。

响应式测试常见问题

这个响应式设计测试工具免费吗?

免费。无需账号,设备和页面数量不限,截图没有水印,也无需安装:它在你的浏览器中运行。

怎么在不同屏幕尺寸下测试网站?

输入网站地址或粘贴 HTML,然后从 40 多种手机、平板、笔记本和台式机尺寸中选择,可逐个查看或并排对比。还可以把框架拖到任意宽度、旋转或跳到常用断点。

设备尺寸准确吗?

每个框架都是一个与该屏幕 CSS 像素宽高完全一致的浏览器视口,因此你的媒体查询、布局和断点的反应与在那台设备上完全相同。

可以测试我自己的 HTML 或本地网站吗?

可以。粘贴 HTML 或打开 .html 文件,即可在所有尺寸下预览并实时编辑。网站通过 https 加载;本地开发服务器请使用 https 隧道,或粘贴构建后的 HTML。

它能发现布局问题吗?

能。它会标出你的 HTML 中比屏幕更宽的元素(手机上出现横向滚动的常见原因),并在缺少 viewport meta 标签时发出警告。

可以保存截图吗?

可以,适用于粘贴的 HTML:按设备像素比把可见区域或整页保存为 PNG,例如 393 像素宽、3x 的框架会得到 1179 像素宽的图片。

像素比标签是什么意思?

手机会把二到四个物理像素合成一个 CSS 像素。标签显示的就是这个比例,粘贴 HTML 的截图也按它保存,清晰度与真实屏幕一致。

我的页面会经过你们的服务器吗?

不会。网站由你的浏览器直接从它自己的服务器加载到框架中,中间没有代理。粘贴的 HTML 和截图只保留在你的浏览器中;上次的页面和设置保存在此浏览器的本地存储中。

为什么网站一直是空白的?

有些网站设置了不允许被嵌入其他页面中显示。打开“为什么是空白的?”查看网站的响应头,或者改为粘贴页面的 HTML。

全部免费工具

在所有尺寸下检查你的布局

粘贴 HTML 或输入网址,并排对比手机、平板和桌面效果。

打开测试工具