响应式设计测试器
免费在线响应式设计测试工具,无需安装。可在多种设备视口中测试页面。
关于响应式设计测试器
响应式设计测试器可预览网站在不同屏幕尺寸下的外观。输入网址,选择手机、平板或桌面分辨率等设备预设,或自行设置宽高,页面就会在指定尺寸的框中渲染。你可以在纵向和横向之间切换,并随时旋转。它是一种无需调整浏览器窗口即可快速检查布局在各种常见断点下表现的方式。
使用方法
1. 输入网站网址并点击「加载」 2. 选择设备预设,或选择「自定义」并输入宽高 3. 对预设可在纵向和横向之间切换,或使用「旋转」 4. 查看页面在该尺寸的预览框中渲染
最佳效果建议
预设覆盖了从手机到全高清桌面的常见尺寸,匹配大多数布局所针对的断点。当需要列表中没有的精确像素尺寸时,使用「自定义」。请注意,部分网站拒绝被嵌入,会显示空白框——这是网站自身的安全设置,并非工具的问题。允许嵌入的页面会完整渲染并保持可交互。
▶为什么有些网站的预览是空白的?
许多网站出于安全会发送禁止在其他页面框架中显示的标头。此时预览保持空白,这是网站的局限,而非工具的问题。
▶有哪些设备尺寸?
多种常见预设:小尺寸和大尺寸手机、两种平板,以及桌面 HD 和全高清分辨率。「自定义」选项可输入任意宽高。
▶纵向和横向如何工作?
选中预设后,可在纵向和横向之间切换,会交换宽高。「旋转」按钮可瞬间在两者间翻转。
▶预览是可交互的吗?
是的。页面运行在允许脚本和表单的沙盒框架中,你可以像在真实设备尺寸上那样点击链接、滚动和填写输入。
▶它会改变我真实的浏览器尺寸吗?
不会。该工具只调整自己的预览框;你的浏览器窗口保持不变。
如果这个工具对你有帮助的话,请考虑请我喝杯咖啡。
请给我买杯咖啡吧。