如何在电脑上查看网站的手机版：4 种方法

在电脑上打开任意网站手机版的四种方法，每种方法实际显示的是什么，以及快速检查时该用哪一种。

在电脑上查看网站的手机版有四种方法：把浏览器窗口缩窄、使用 Chrome DevTools 设备模式、安装手机视图扩展，或者在手机模拟器中打开页面。第一种很快，但经常显示得不对。其余三种会向网站请求真正的移动端布局，而这通常正是你想看的。

用哪种方法，取决于你为什么要看。检查间距的设计师、想看客户在 iPhone 上看到什么的营销人员、追查只在安卓上出现的问题的开发者，需要的东西各不相同。

为什么窄窗口不等于手机版

拖动窗口边缘会让视口变窄，CSS 媒体查询随之触发，响应式布局重新排列。这一部分是有效的。没有改变的，是网站对你设备所了解的其他一切。

手机会发送移动端的 user agent 字符串和 Sec-CH-UA-Mobile: ?1 等客户端提示，并向 JavaScript 报告较小的屏幕尺寸、较高的设备像素比和触控支持。有些网站会根据这些信号返回不同的页面、单独的 m. 子域名、更轻量的图片或不同的菜单。电脑上的窄窗口不会发送这些信号，所以你看到的可能只是一个被挤压的桌面版页面。

还有一个实际限制：桌面版 Chrome 通常不允许把窗口缩到比 500 像素小太多，而很多手机的视口宽度在 360 到 440 个 CSS 像素之间。

方法一：Chrome DevTools 设备模式

Chrome 内置了手机模拟器。按 F12（Mac 上为 Cmd + Option + I）打开 DevTools，然后在 Mac 上按 Cmd + Shift + M、在 Windows 上按 Ctrl + Shift + M 切换设备工具栏。从 Dimensions 列表中选择设备并刷新页面。

设备模式会修改视口、设备像素比和 user agent，还可以切换为触摸事件。它也能限制网络和 CPU 速度，便于测试性能。Google 称它是对手机的“一阶近似”，因为你电脑的 CPU 和浏览器仍然是桌面端的。

缺点是比较麻烦。DevTools 占据三分之一的屏幕，预设比较通用，而且每个标签页都得重新设置。完整流程见 Chrome 手机模拟器使用指南。

方法二：手机视图扩展

手机视图扩展通过工具栏按钮完成同样的核心工作，无需打开 DevTools。例如 Chrome 上的 Mobile View Extension，会以对应设备的 user agent、屏幕尺寸和设备像素比，在手机或平板外框中重新加载当前标签页。你可以按名称选择苹果或安卓预设，切换竖屏和横屏，并把带外框的画面保存为 PNG 截图。

如果你经常检查页面、审查客户网站，或者想一边浏览一边“以手机视角”看页面，这是最快的方法。切换页面时预览保持开启，在 localhost 上也能用。

它也有需要了解的限制。预览运行在桌面版 Chrome 内的框架中，所以不会生成触摸事件，你仍然用鼠标操作。hover 和 pointer 媒体查询没有完全模拟。要测试触控手势或真实硬件上的性能，请使用真机。两种方式的优缺点对比见手机模拟器扩展与 DevTools 对比。

方法三：手机模拟器

当你需要真正的移动端浏览器，而不是假扮成手机的桌面版 Chrome 时，就用模拟器：

Xcode Simulator（仅限 macOS）运行真正的 iOS Safari，是没有 iPhone 时最接近 iPhone 的选择。参见没有 iPhone 如何测试网站。
Android Studio 模拟器可在 Windows、macOS 或 Linux 上运行带 Chrome 的安卓系统。参见在电脑上测试安卓端网页。

两者都免费，下载体积都很大，启动也要几分钟。它们适合排查特定引擎的问题，比如只在 Safari 中出错的布局。

方法四：直接访问移动版网站

一些老网站仍然在 m.example.com 这样的地址上运行独立的移动版网站。在桌面浏览器中输入这个地址，往往能直接看到移动版页面。现代网站很少这样做，很多还会把桌面访客重定向回主域名，所以这只是针对个别网站的捷径，算不上通用方法。

该用哪种方法

目标	最佳方法	原因
快速看看页面在手机上的样子	手机视图扩展	一键开启，真实的移动端 user agent，浏览时保持开启
调试移动端布局的 CSS 或 JavaScript	DevTools 设备模式	Elements、Console 和 Network 面板就在预览旁边
检查仅在 Safari 中出现的问题	Xcode Simulator 或真实 iPhone	只有 WebKit 才能显示 WebKit 的问题
测量移动端速度	DevTools 限速或移动端网站测速	桌面硬件会掩盖缓慢的脚本
检查点按目标和手势	真机	鼠标点击无法模拟手指

打开手机版后要看什么

打开手机视图是简单的部分，有用的是下面这份简短清单：

不用放大就能看清文字，正文字号至少 16 px。
没有横向滚动。出现横向滚动条，通常意味着有固定宽度的元素或宽表格。
菜单能打开、关闭，并且单手拇指就能操作。
按钮和链接间距足够，便于点按。
表单会调出正确的键盘，不会被固定栏挡住。
图片在高密度屏幕上清晰，但文件不会太大。

更完整的上线前清单，请使用移动端网页测试清单。

常见问题

不装扩展能在 Chrome 中查看网站的手机版吗？

可以。打开 DevTools，按 Ctrl + Shift + M（Mac 上为 Cmd + Shift + M）切换设备工具栏。扩展可以省去这些步骤，并按标签页保留设置。

缩小页面或调整窗口大小能看到手机版吗？

调整窗口大小能看到响应式布局在该宽度下如何重新排列，但不会发送移动端 user agent，所以会识别设备的网站仍然会返回桌面版。

电脑上的手机视图和手机上看到的完全一样吗？

很接近，但不完全相同。桌面工具改变的是视口和网站读取的信号，并没有改变渲染引擎、CPU 或触控输入。最终检查请在真机上打开页面。