要在手机上打开 localhost 网站，先让开发服务器监听网络（通常加上 --host 参数），把手机连到同一个 Wi-Fi，然后访问电脑的局域网 IP 加端口，例如 http://192.168.1.20:5173。如果网络不允许这样连接，可以通过 USB 使用 Chrome 端口转发，或者用隧道。如果你只是想看移动端布局，甚至不需要手机，直接在桌面版 Chrome 里用手机视图打开 localhost 即可。
最快的方法：在桌面版 Chrome 中用手机视图打开 localhost
电脑上的 localhost 在任何桌面工具里都能访问，无需任何网络设置：
- Chrome DevTools 设备模式：打开 DevTools，按
Ctrl + Shift + M（Mac 上为Cmd + Shift + M）切换设备工具栏，选择一款手机。参见 Chrome 手机模拟器使用指南。 - 支持本地页面的手机视图扩展。Mobile View Extension 可以在
localhost上运行，在本地页面之间切换时也会保持手机视图，开发时可以一直开着。
很多在线“响应式检测”工具做不到这一点，因为它们是从自己的服务器加载你的网址，访问不到你的电脑。
当你需要真实的触控、真实的键盘或 Safari 时，再换到手机上。
方法一：同一 Wi-Fi + 电脑的局域网 IP
1. 让开发服务器监听所有网络接口
大多数开发服务器默认只监听 localhost（127.0.0.1），其他设备无法访问。让它们监听网络：
| 工具 | 命令 |
|---|---|
| Vite | npm run dev -- --host |
| Astro | npm run dev -- --host |
| Next.js | next dev -H 0.0.0.0 |
| Create React App / webpack dev server | 设置 HOST=0.0.0.0 或 host: '0.0.0.0' |
| Python | python -m http.server 8000 --bind 0.0.0.0 |
Vite 和 Astro 加上 --host 启动后，会显示一个“Network”地址。在手机上打开的就是这个地址。
2. 查找本机局域网 IP
如果工具没有显示：macOS 上打开 系统设置 > Wi-Fi > 详细信息；Windows 上运行 ipconfig，找到 IPv4 地址；Linux 上运行 ip addr。地址通常以 192.168. 或 10. 开头。
3. 在手机上打开
把手机连到同一个 Wi-Fi 网络，访问 http://<你的IP>:<端口>。
如果打不开
- 防火墙。 macOS 和 Windows 可能会拦截对 Node 或 Python 的入站连接。出现提示时允许该应用，或为该端口添加规则。
- 访客网络或办公网络。 很多这类网络会把设备相互隔离（“客户端隔离”）。请改用方法二或方法三。
- 写死的
localhost地址。 如果前端请求的是http://localhost:8080/api，手机会去连接它自己。请改用相对路径，或者用环境变量配置 API 地址。 - CORS 和 Cookie。 新的源（
192.168.1.20:5173）可能会让只允许localhost的 Cookie 或 CORS 配置失效。
方法二：Chrome 端口转发到安卓手机
如果安卓手机通过 USB 连接并开启了 USB 调试，Chrome 可以把手机上的端口映射到你的电脑：
- 在电脑上打开
chrome://inspect/#devices。 - 点击 Port forwarding，添加端口（例如
5173）和目标localhost:5173，勾选 Enable port forwarding。 - 在手机的 Chrome 中打开
http://localhost:5173。
由于手机使用的是 localhost，Cookie 和 CORS 的行为与电脑上一致，还可以在桌面 DevTools 中检查页面。开启 USB 调试的步骤见在电脑上测试安卓端网页。
方法三：带公共 HTTPS 地址的隧道
隧道（内网穿透）会给本地服务器分配一个临时的公网地址。它在任何网络下都能用，并且提供 HTTPS，而有些功能必须用 HTTPS（Service Worker、地理定位、摄像头、安全 Cookie）。
两种常用方案：
- Cloudflare Tunnel：
cloudflared tunnel --url http://localhost:5173会输出一个临时的trycloudflare.com地址。 - ngrok：
ngrok http 5173会输出一个转发地址（需要免费账号）。
隧道运行期间，任何拿到地址的人都能访问你的开发服务器，所以用完请关闭，也不要暴露管理后台或真实数据。有些框架默认会拦截未知的主机名，例如 Vite 需要把隧道域名加到 server.allowedHosts 中。
方法四：模拟器
- Xcode Simulator（Mac）： 与 Mac 共用网络，所以在模拟的 Safari 中可以直接打开
http://localhost:5173。参见没有 iPhone 如何测试网站。 - Android Studio 模拟器： 其中的
localhost指向模拟器本身。要访问电脑，请使用http://10.0.2.2:5173。
该用哪种方法
| 场景 | 方法 |
|---|---|
| 写代码时检查布局 | 桌面版 Chrome 的手机视图 |
| 在家用自己的手机测试触控和键盘 | 同一 Wi-Fi + 局域网 IP |
| 安卓手机、办公网络、需要 DevTools | Chrome 端口转发 |
| 仅限 HTTPS 的功能，或要分享给同事 | 隧道 |
| 没有 iPhone 但要看 Safari 的表现 | Xcode Simulator |
常见问题
为什么手机打不开 localhost？
在手机上，localhost 指的是手机本身。请使用电脑的局域网 IP，并通过 --host 或 0.0.0.0 让开发服务器监听网络。
如何在 iPhone 上测试 localhost？
使用同一 Wi-Fi 和电脑的 IP 地址，或使用隧道，或在 Mac 上用 Xcode Simulator，在那里 localhost 可以直接使用。
没有手机能看 localhost 的手机版吗？
可以。使用 DevTools 设备模式，或支持本地页面的手机视图扩展。