Start at 320 pixels
The narrowest phones in use are 320 to 360 CSS pixels wide. If the layout holds there, it holds almost everywhere.
嘉Jaykou工具台 · 响应式测试器 代码留在你的设备上
每日 免费 3 次
免费响应式设计测试工具同时在每种屏幕尺寸下查看你的页面。
输入网站地址或粘贴您的 HTML，并以真实手机、平板、笔记本和台式机屏幕大小的框架查看，或并排显示，或一次显示一个。
将框架拖到任意宽度，旋转它，在常见的断点之间切换，发现横向溢出的内容，并保存你的 HTML 截图。
100% 本地处理游客每日 3 次 · 无水印注册送 20 积分
游客每日 3 次 没有代理 无水印
屏幕尺寸模拟器
用真实 iframe 视口渲染同一份响应式页面（srcdoc 注入，同源可控，不请求外部地址）。
设备预设
宽度
高度
缩放
预览内容
视口 393 × 852 · 缩放 70% · 命中手机断点（导航隐藏）
注意：如果换成外部网址，站点可能通过 X-Frame-Options 拒绝被嵌套；本工具默认使用同源内容。
粘贴的 HTML 保留在你的浏览器中。网站直接从各自的服务器加载。
使用说明
响应式测试器怎么用？4 步就能上手
响应式测试器用来快速检查内容或设备是否正常，输入后即时给出结果与说明。 免费的响应式测试工具：在数十种手机、平板和笔记本电脑屏幕尺寸上并排查看网站或您的 HTML。
1
提供待检查的内容
把文本粘贴进输入框、上传文件，或按提示授权麦克风、摄像头等设备权限。
2
设置检查选项
选择检查维度或严格程度，例如忽略大小写、只检查关键项等。
3
开始检查
点击开始按钮，结果会在几秒内显示出来。
4
查看报告
结果区会标出问题位置并给出修改建议，可按提示逐项修正。
· 涉及麦克风、摄像头时，请在浏览器弹窗中点击允许。· 检查在本地完成，输入内容不会被保存或上传。
Tips for layouts that hold at every size
Drag, don't just pick devices
Breakpoints break between devices too. Drag the frame slowly from narrow to wide and watch for the moment something jumps or overlaps.
Never forget the viewport tag
Without <meta name="viewport" content="width=device-width, initial-scale=1"> phones lay the page out about 980 pixels wide and shrink it until text is tiny.
嘉Jaykou工具台
这些也在你的浏览器里完成
无需注册即可试用，游客每日 3 次免费。所有处理都在你的设备上完成，文件不会被上传。
- 490 个免费工具
- 图片 · 视频 · PDF · 文本
- 每日免费额度
所有工具每天都有免费额度。 游客每日 3 次免费，注册再送 20 积分。文件不上传，处理全在你的设备上完成。
响应式测试器常见问题
这个响应式设计测试工具是免费的吗？
是的。无需账户，无设备或页面限制，截图没有水印，也无需安装任何东西：它在你的浏览器中运行。
我如何在不同的屏幕尺寸上测试我的网站？
输入您网站的网址或粘贴您的 HTML，然后从 40 多种手机、平板、笔记本和台式机尺寸中选择，可一次选择一个或并排显示。拖动框架到任意宽度，旋转它或跳转到常用的断点。
设备尺寸有多准确？
每一帧都是一个浏览器视口，其宽度和高度正好是该屏幕的 CSS 像素，因此您的媒体查询、布局和断点的响应就像在该设备上一样。
我可以测试我自己的 HTML 或本地网站吗？
是的。粘贴你的 HTML 或打开一个 .html 文件，以预览其在各种尺寸下的效果并实时编辑。网站通过 https 加载；对于本地开发服务器，请使用 https 隧道或粘贴已构建的 HTML。
它能发现布局问题吗？
是的。在你的 HTML 中，它会标记比屏幕宽的元素，这是手机上横向滚动的常见原因，并在缺少 viewport 元标签时发出警告。
我可以保存截图吗？
是的，对于粘贴的 HTML：将可见区域或整个页面以设备的像素比保存为 PNG，因此一个 393 像素宽的框架在 3 倍缩放下会得到一个 1179 像素宽的图像。
像素比标签是什么意思？
手机将每个 CSS 像素打包为两个到四个物理像素。标签显示了该比例，粘贴的 HTML 的截图也是按这个比例保存的，因此它们与真实屏幕的清晰度相匹配。
我的页面会经过你们的服务器吗？
不。网站是由你的浏览器直接从它自己的服务器加载的，在框架内，中间没有代理。粘贴的HTML和截图保存在你的浏览器中；你最后的页面和设置保存在这个浏览器的存储中。
为什么网站会保持空白？
有些网站选择不在其他页面中显示。打开“为什么是空白的？”查看网站的头信息，或者直接粘贴页面的 HTML。
更多像这样的免费工具
免费工具
在每种尺寸下检查你的布局
粘贴您的 HTML 或输入地址，并并排比较手机、平板和桌面。