一切就绪!

感谢安装 Mobile View。以下说明如何在任意页面上叠加真实设备外框,同时查看桌面与移动端。

1

固定扩展(推荐)

点击 Chrome 右上角的扩展(拼图)图标 ,再点击「Mobile View」旁的图钉,让图标留在工具栏。

2

打开任意网站

打开普通网站(https:// 页面)。然后点击工具栏中的 Mobile View 图标——真实设备外框会出现在页面上,让您同时看到桌面与移动端。首次使用时,Chrome 会请求访问该网站——点击允许即可。

3

选择设备与布局

使用顶部面板的设备按钮 📱 ▾ 在 iPhone、Android 手机与平板之间切换。用 旋转,用尺寸菜单 100%(50–125%)缩放,并将设备拖到任意位置——或点击专注 调暗桌面并将设备居中。

4

最多同时显示 5 台设备

点击顶部面板的设备数按钮 ,选择显示数量(1–5)。每台设备保留各自的型号、旋转、尺寸与品牌色,侧边停靠栏(左或右)可一键切换。专注模式下可排成一行、网格或堆叠——并可锁定,避免误点或 Esc 退出。用键盘添加或移除:Shift + = / Shift + −

5

同步交互

滚动、点击与输入在桌面页面与移动预览之间保持同步。可在顶部面板用同步 开关。

6

截图

点击相机 ,选择仅设备 📱(按外框裁剪)或全屏 🖥️(桌面与设备一起)——适合设计稿与问题反馈。

7

录制屏幕

点击录制 开始全屏录制。立即录制当前标签页——没有「共享屏幕」对话框——视频以 MP4 或 WebM 直接保存到设备;绝不会上传。

面板按钮说明

📱 ▾
设备 — iPhone、Android 或 iPad
设备数 — 同时显示 1–5 台,停靠左 / 右
旋转 — 竖屏 / 横屏
同步 — 同步滚动开 / 关
截图 — 仅设备或全屏
录屏 — 完整捕获(MP4/WebM)
专注模式 — 调暗桌面;行 / 网格 / 堆叠,可锁定
100%
尺寸 — 缩放 50–125%
自定义尺寸 — 任意分辨率与品牌色(Shift+5)
🌙
主题 — 浅色 / 深色
🇬🇧 ▾
语言 — 50+ 种界面语言
网站 — 打开 Mobile View 网站
帮助 — 快捷键与提示
关闭 — 退出预览(Esc)

键盘快捷键

Shift+1
全屏截图 — 桌面 + 设备
Shift+2
设备截图 — 按外框裁剪
Shift+3
录屏 — 开始 / 停止(MP4/WebM)
Shift+4
专注模式 — 开 / 关
Shift+5
自定义尺寸 — 开 / 关
Shift+=
添加设备 — 再加一台手机 / 平板
Shift+
移除设备 — 减少一台
Esc
退出 — 先退出专注模式,再关闭
💡

提示:设备、旋转、位置、主题与语言会跨标签页与刷新保存并恢复。部分浏览器页面(如 chrome:// 设置)无法预览——请打开普通网站。

进一步了解 Mobile View