新
多设备比较
并排显示多个设备并同时测试它们。一次导航，所有断点同时验证。
- 同一选项卡中的多个设备
- 设备间共享导航
- 将整个捕获为一张图像
Chrome、Firefox和Edge扩展
电脑上的智能手机和平板电脑模拟器
测试任何网站的移动版本，在81台设备上检查您的响应式网页设计，并一键准备客户演示。无需离开浏览器。
1,500,000+ 安装 · 4.9/5 在Chrome Web Store上
几秒钟内免费安装 · 仅限电脑
- 81预配置设备
- 14个品牌从Apple到小米
- 5年被开发人员和设计师采用
- 162 → 2048 px从智能手表到桌面屏幕
在一个面板中测试响应式网站所需的一切
单击切换到移动视图，单击返回到桌面。其他功能与真实手机一样：触摸手势、缩放、横向模式、PWA。
一键视频捕捉
WEBM、GIF或MP4格式用于您的演示和教程，直接从模拟器录制，有无摄像头均可。
透明PNG截图
高清透明背景截图，适用于演示、模型或客户电子邮件。
真实触摸滚动
手指手势被本地模拟：惯性、反弹、缩放。导航表现如同移动设备。
自定义设备
创建并保存具有目标精确屏幕分辨率和viewport的自定义设备。
精确的viewport和像素密度
每个模型都应用其真实的CSS分辨率、像素比和User-Agent：media queries和断点会像在设备上一样触发。
Localhost、预生产、所有框架
适用于任何URL，包括本地服务器，并与React、Vue、Angular、WordPress或静态网站一起工作。
暗模式和10+选项
PWA模式、全屏、原生键盘、即时横向切换、暗主题以提高视觉舒适度。
提供PNG模型
78个透明背景的设备模型，可免费下载用于交付物。 查看模型
超过81台设备可供使用
66部智能手机 · 5台平板电脑 · 9个桌面屏幕 · 1块智能手表
旧型号和新型号，每次发布时都会更新。每个设备都配备其精确的viewport CSS、像素密度和User-Agent。包括智能手表、互动终端和桌面屏幕。
日常使用的三种方式
前端开发
无需离开代码即可检查断点
在集成过程中一键从320 px切换到1280 px，具有真实移动设备的触摸手势和缩放功能。
代理商和自由职业者
有效的客户演示
在真实设备中展示网站，然后导出视频或裁剪截图用于报告。
项目经理和QA
在所有设备上进行测试
并排比较多个模型，记录异常截图，节省数小时测试时间。
Mobile FIRST或DevTools的响应模式？
DevTools调整窗口大小。Mobile FIRST复制设备及其相关内容。
| 功能 |  | DevTools响应模式 |
|---|---|---|
| 预配置设备 | 81，每次发布时更新 | 简短列表 |
| 设备的真实显示 | 是（浏览器和模型） | 否 |
| 多个设备同时使用 | 是的，并排 | 否 |
| 真实的触摸手势和缩放 | 本地模拟 | 部分 |
| WEBM、GIF、MP4视频捕捉 | 一键 | 否 |
| 带透明模型的截图 | 裁剪PNG | 原始捕捉 |
| 准备好展示给客户 | 是 | 调试工具 |
被开发人员和设计师采用超过5年
我们在Chrome Web Store上的评分不言自明。
4.9/5 基于5,100条评价
市场上最好的响应式测试扩展！
超级直观、轻便且功能丰富。触摸滚动非常逼真，拥有超过70个现成设备真是太棒了。如果您是前端开发人员或UI/UX设计师，这是一个必备工具。全五星好评！
裁剪后的截图直接进入客户报告或我的PowerPoint。这替代了数小时的手动修饰 😊。非常满意！
这是一个真正被低估的扩展。它完成了工作，甚至做得更多。我甚至想尝试专业版以享受他们的酷炫功能，但免费版已经很棒了。
它不仅适用于网页开发人员：我会说它对任何拥有网站并希望随时了解其在不同设备上外观的人都很有用。
- 01 安装扩展 在Chrome或Firefox上，从官方商店安装。免费，无需创建账户。
- 02 打开要测试的页面 生产、预生产或localhost：点击图标，页面切换到移动视图。
- 03 切换设备，捕捉 从一个模型切换到另一个模型，并排比较，导出截图或视频。
什么是移动模拟器？
移动模拟器在您的电脑浏览器中重现智能手机或平板电脑的显示条件：viewport CSS、像素密度、User-Agent和方向。这使您能够看到网站的移动版本，就像用户看到的一样，而无需每次修改都拿出手机。
Mobile FIRST涵盖81个预配置模型：iPhone模拟器、Android仿真器、iPad模拟器、三星Galaxy平板电脑和笔记本电脑屏幕。每个设备都应用其真实分辨率，因此您的media queries和断点会像在真实设备上一样触发。纵向/横向切换、缩放和触摸滚动被模拟以恢复原生行为。
扩展适用于打开的选项卡，无论URL如何：生产站点、预生产环境或开发期间的本地服务器。它与React、Vue、Angular、WordPress和静态网站一起工作，无需配置。专为前端开发人员、设计师和QA团队设计，它既用于验证响应式网页设计，也用于准备客户演示。
常见问题
模拟器是否可以替代真实手机测试？
不。Mobile FIRST在日常开发中非常精确，但最终仍需在真实设备上进行测试以获得完整验证。
扩展适用于哪些浏览器？
Chrome、Firefox、Edge、Opera、Brave 及所有基于 Chromium 的浏览器。安装只需几秒钟且无需账户。
有多少设备可用？
81个预配置设备：66部智能手机，5台平板电脑和10个桌面屏幕及智能手表。您还可以创建具有自定义分辨率和viewport的设备。
我可以录制移动导航视频吗？
可以，一键录制，支持WEBM、GIF和MP4格式。PNG截图以透明背景导出。
可以在localhost或预生产环境中测试网站吗？
可以。扩展适用于当前选项卡，无论URL如何：生产、预生产或开发期间的本地服务器。
与DevTools的响应模式有何不同？
DevTools调整窗口大小以进行技术检查。Mobile FIRST复制设备：真实框架、触摸手势、缩放、多个模型并排、导出截图和视频。
是否添加了新型号？
是的，随着制造商推出新屏幕，列表会定期更新。
直接在浏览器中测试您的网站在81台设备上的效果
无需购买手机，无需创建账户。
- 安装后立即可用的81台设备
- 真实的视口、User-Agent和触摸事件
- 也适用于localhost和预生产环境
- 可导出的截图和视频
免费 · 4.9/5 基于5,100条评价
1,500,000+ 用户