并排对比两个手机视图
同时打开 iPhone 与 Android 预览，在两种屏幕尺寸下查看同一个网站。
无需 DevTools 的 Chrome 手机视图
Mobile View Extension — 用手机视图查看网站
直接打开当前页面的手机版。这款 Chrome 扩展会以手机形式重新加载标签页，支持对比两种屏幕尺寸、调试 localhost，并保存截图。
添加到 Chrome免费 · 无需注册
不收集浏览记录
支持 localhost
localhost:3000/dashboard
iPhone 17 Pro
Oppo A6xRuns over the page you already have openNo tab switching
让响应式测试更简单
为日常检查打造的手机视图切换工具。
无需拖动窗口边缘、输入视口尺寸或在多个标签页之间切换，即可打开网站的手机视图。控制按钮就在你正在测试的页面旁边。
一键切换视图
在悬浮工具栏选择设备，页面会以手机视图重新加载；返回桌面视图也是同样的操作。
浏览记录仍归你所有
无需账号。扩展不会收集个人数据或浏览记录。
上线前先测 localhost
先检查本地页面，再用相同的设备预设查看已发布的站点。
常见设备预设
按名称选择手机或平板，无需手动输入视口尺寸。
所见即所存
需要分享或复查时，可直接从工具栏保存当前手机视图。
一个网站 · 两块屏幕
同时在两块屏幕上测试响应式效果。
把较窄的手机与更宽的设备并排放置，对比同一页面的两种版本。标题换行、导航拥挤和内容缺失都更容易发现。
- 带名称的手机与平板预设
- 同一网址的两个实时视图
- 无需离开页面即可切换设备
上线前后
localhost 与线上站点使用同一套响应式测试。
开发时先检查页面，随后用相同的设备预设打开已发布的网址。从开发到上线，测试流程保持一致。
支持 localhost
无需发布临时构建，即可预览本地页面的手机版。
快速截图
保存所选设备的视图，用于评审或交接。
使用方法
从桌面页面到 Chrome 手机视图
01
在 Chrome 中安装扩展并打开任意网站
02
点击手机图标并选择设备，页面会以手机视图重新加载
03
添加第二个手机预览，或保存当前视图
指南
在 Chrome 中测试移动版网页
如何在电脑上查看网站的手机版：4 种方法
在电脑上打开任意网站手机版的四种方法，每种方法实际显示的是什么，以及快速检查时该用哪一种。
阅读文章 →Chrome 手机模拟器：DevTools 设备模式使用教程
Chrome 内置手机模拟器的分步教程：打开设备模式、选择或添加机型、限制网络和 CPU、模拟触摸以及截图。
阅读文章 →如何在手机上访问 localhost 本地网站（真机与手机视图）
在真机或手机视图中打开本地开发网站：局域网 IP 与 --host、Chrome 端口转发、内网穿透隧道、模拟器中的地址，以及常见问题的解决方法。
阅读文章 →iPhone 屏幕尺寸、分辨率与视口尺寸一览表（全机型）
从 iPhone SE 到 iPhone 18 Pro Max 的全部机型：屏幕尺寸（英寸）、分辨率（像素）、CSS 视口尺寸和像素比，并附网页设计说明。
阅读文章 →如何在电脑上截取网页的手机版截图（含整页长截图）
在电脑版 Chrome 中截取任意网页的手机尺寸截图：可见区域或网页长截图，带或不带设备外框。
阅读文章 →如何测试响应式设计：能找出真实问题的方法
检查网站响应式效果的分步方法：宽度扫描、设备配置检查、内容压力测试、缩放测试和自动截图。
阅读文章 →常见问题
安装之前
如何在 Chrome 中以手机视图查看网站？
安装 Mobile View Extension，打开网站后点击悬浮工具栏中的手机按钮。选择设备后，页面会以手机宽度重新加载，无需调整浏览器窗口大小。
切换到手机视图时页面会刷新吗？
会。扩展会使用移动端 user agent 和视口重新加载标签页，因此网站呈现的是真正的手机版，而不是被压窄的桌面布局。
可以同时测试两种手机尺寸吗？
可以。同一页面能在两台设备视图中并排显示，响应式对比更快捷。
能在 localhost 上使用吗？
可以。扩展支持本地开发页面，你可以在发布前完成手机端检查。