安卓模拟器测试网页：如何在电脑上测试网站的安卓端

在电脑上测试网站在安卓 Chrome 中的表现：Chrome 手机视图、Android Studio 模拟器，以及对真机进行远程调试。

要在电脑上测试网站的安卓端，先在桌面版 Chrome 中用安卓尺寸的视图检查，再用 Android Studio 模拟器或通过 USB 调试连接的真机确认。桌面版 Chrome 模拟安卓要比模拟 iPhone 准确得多，因为安卓上的 Chrome 使用的是同一个 Blink 引擎。模拟器和真机则补上了桌面版 Chrome 无法提供的部分：真实的浏览器界面、键盘和移动硬件。

为什么安卓比 iPhone 更容易模拟

在 iPhone 上，浏览器引擎几乎都是 WebKit，而桌面版 Chrome 并不使用它。在安卓上，大多数人的默认浏览器是 Chrome，与桌面版基于同一个引擎。所以在桌面版 Chrome 中模拟安卓手机时，CSS 和 JavaScript 的表现通常一致，主要差别在于屏幕尺寸、输入方式、性能和浏览器界面。

难点在于多样性。安卓手机的宽度（竖屏通常为 360 到 412 个 CSS 像素）、像素比和浏览器都各不相同。三星手机预装的 Samsung Internet 有自己的版本节奏和设置，比如强制深色模式，可能会改变网站的外观。

第一步：在 Chrome 中使用安卓尺寸视图

检查布局时，可以用以下任一工具：

DevTools 设备模式。 打开 DevTools，按 Ctrl + Shift + M（Mac 上为 Cmd + Shift + M），选择 Pixel 或 Galaxy 预设并刷新。设备模式可以模拟触摸事件，还能限制 CPU 和网络速度。完整步骤见 Chrome 手机模拟器使用指南。
手机视图扩展。 Mobile View Extension 提供安卓预设，无需打开 DevTools，就能以对应的 user agent、屏幕尺寸和像素比重新加载当前标签页。需要快速浏览大量页面时很方便。

至少测试 360 px 和 412 px 两种宽度，再加上横屏。

第二步：Android Studio 模拟器

Android Studio 是 Google 免费提供的安卓开发环境，支持 Windows、macOS 和 Linux。它自带一个模拟器，可以运行完整的安卓系统镜像。

安装 Android Studio，打开 Device Manager。
创建一个虚拟设备。选择手机配置和包含 Google Play 的系统镜像，这样就会预装 Chrome。
启动设备，打开 Chrome，输入网址。

要在模拟器中访问电脑上的开发服务器，请用特殊地址 10.0.2.2 代替 localhost。例如，http://10.0.2.2:5173 会访问你电脑 5173 端口上的服务器。模拟器需要在 BIOS 或系统设置中开启硬件虚拟化，才能以可用的速度运行。

第三步：用远程调试连接安卓真机

真机能反映真实的性能和触控表现，而 Chrome 允许你在电脑上检查它：

在手机上打开 设置 > 关于手机，连续点击 版本号 七次，开启开发者选项。
在 开发者选项 中打开 USB 调试。
用 USB 连接手机，并在手机上允许调试请求。
在电脑上打开 Chrome，访问 chrome://inspect/#devices。
在手机的 Chrome 中打开你的网站，然后在电脑上点击它旁边的 inspect。

这样你就能对手机上运行的页面使用完整的 DevTools，还有实时的屏幕投射。同一页面还提供 Port forwarding，可以把手机上的端口映射到电脑，这样在手机上打开 localhost:3000 就会访问你的本地服务器。详见如何在手机上访问 localhost。

那在线的安卓模拟器呢？

搜索“在线安卓模拟器”的人，通常想要的是两种东西之一。有些人想要一个能在浏览器标签页里运行安卓的网站。这类服务确实存在，它们会串流远程模拟器或真机画面，通常收费或有时长限制。另一些人则想让 Chrome 本身表现得像一部安卓手机，而这正是设备模式或手机视图扩展所做的事。

对网站测试来说，第二种方式几乎总能满足布局检查的需要，其余部分交给 Android Studio 模拟器或真机即可。远程串流服务适合无法在本地安装任何软件的情况。

安卓上需要特别检查的项目

360 px 和 412 px 宽度，这是中端机和旗舰机最常见的尺寸。
屏幕键盘。 键盘弹出时，可见区域会缩小。固定页脚和聊天按钮可能会挡住输入框。
系统返回键和返回手势。 单页应用要正确处理历史记录，让“返回”符合用户预期。
深色模式。 Samsung Internet 和 Chrome 的实验性设置可能会把没有声明配色方案的页面变暗。
字体缩放。 安卓用户经常调大系统字号。检查文字变大后布局是否依然正常。
中端设备上的性能。 使用 DevTools 的 CPU 限速，或用真实的中端手机；旗舰机会掩盖缓慢的 JavaScript。

完整的上线前清单见移动端网页测试清单。

常见问题

Chrome 的安卓模拟准确吗？

在布局以及大部分 CSS 和 JavaScript 方面是准确的，因为安卓上的 Chrome 使用同一个引擎。在性能、触控手势和浏览器界面方面准确度较低，所以重要流程请在真机上确认。

如何在安卓模拟器中打开 localhost？

用 10.0.2.2 代替 localhost，端口不变，例如 http://10.0.2.2:3000。

只是测试网站，需要安装 Android Studio 吗？

不需要。大多数布局检查在桌面版 Chrome 中就能完成。当你需要真实的安卓浏览器界面、键盘行为或特定的安卓版本时，才值得安装 Android Studio。