切换到移动视图

单击即可预览任何页面的移动视口。

现代网络用户不会停滞不前。他们在办公室使用 27 英寸的显示器，在火车上使用口袋大小的屏幕，他们希望每个网站都能为这两种屏幕量身定制。对于设计师、开发者、营销人员，甚至是日常的高级用户来说，这每天都会引发一个问题：“这个页面在真正的手机上看起来会是什么样子？” Chrome 的 DevTools 可以解答这个问题——在你浏览完菜单、面板和层层设备框架之后。切换到移动视图可以将这一过程缩短到只需单击或使用快捷键即可。 点按工具栏图标（或按下 Alt + M），当前页面将立即限制为手机大小的视口。柔和的灰色背景将页面与浏览器窗口的其余部分隔离开来，使您的内容成为焦点，同时在视觉上提醒您移动视图已启用。角落处会悬停一个小徽章，显示当前设备预设——从 iPhone 14 开始， 该扩展程序附带三个最常用的断点——iPhone 14（390 × 844 像素）、Pixel 7（412 × 915 像素）和 iPad mini（768 × 1024 像素）。每个预设都会调整元视口标签、元素宽度和滚动行为，以模拟所选设备的使用体验。 谁受益？ 前端开发人员无需打开 DevTools 即可在几秒钟内捕获布局回归 - 这在处理多个分支或暂存服务器时非常理想。 UI/UX 设计师在将新的 Figma 作品发送给工程部门之前会进行快速的健全性检查。 质量保证团队可以将键盘快捷键编写到自动化测试套件中，以实现更快的响应测试。 内容创建者和营销人员预览新闻通讯、登录页面和社交嵌入，以确保在小屏幕上的可读性。 重现移动用户报告的问题的客户支持代理不再需要物理设备或模拟器。 探索响应式设计概念的教育工作者和学生可以获得一个平易近人、权限安全的沙盒。 无论您是在发布前几分钟微调结帐流程，还是在教室里教授有抱负的开发人员，此扩展都可以融入您的工作流程，而且几乎不需要学习曲线。