手机远程编程：Claude Code 移动端工作原理

TL;DR — 在电脑上启动 Claude Code WebUI，手机通过 Tailscale 访问，添加到主屏幕就是一个全功能 AI 编程助手。无需安装 App，无需公网 IP，端到端加密。

Claude Code 是一个运行在终端的 AI 编程助手，拥有 35+ 工具，能读写文件、执行命令、搜索代码。但终端意味着你必须坐在电脑前。

WebUI 改变了这一点。它把 Claude Code 的全部能力暴露为一个 Web 界面 — 然后我们做了一件事：让这个 Web 界面在手机上也很好用。

工作原理

整个系统由三个组件构成：

💻

开发机

Claude Code Server

WebSocket

🌐

Tailscale

WireGuard Mesh

HTTPS

📱

手机

PWA WebApp

开发机运行 Express + WebSocket 服务器，Tailscale 在设备间建立 WireGuard 加密隧道，手机浏览器通过 PWA 模式获得原生 App 体验。数据流全程不经过公网。

启动时自动检测网络地址

当你用 --host 0.0.0.0 启动时，服务器会扫描所有网卡接口，自动识别 Tailscale 的 100.x/8 CGNAT 地址段和局域网地址，直接打印到终端：

Terminal

$ claude-code --web --host 0.0.0.0

🌐 Claude Code WebUI 已启动
   地址:      http://localhost:3456
   WebSocket: ws://localhost:3456/ws
   模型:      opus
   📱 Tailscale: http://100.113.219.128:3456
   📱 局域网:   http://192.168.0.18:3456

看到 Tailscale 地址后，手机浏览器打开它就行了。这个地址检测逻辑只有 20 行代码 — 遍历 os.networkInterfaces()，检查 100.x.x.x（Tailscale CGNAT）和 192.168.x.x / 10.x.x.x（局域网）地址段。

六大优势

🔗

零配置组网

启动即显示 Tailscale 地址，无需手动查 IP、配端口转发、搞内网穿透。

auto-detect 100.x.x.x

📦

PWA 原生体验

Web App Manifest + Service Worker + iOS standalone。添加到主屏幕即为全屏 App。

display: standalone

⚡

实时双向通信

WebSocket 长连接。流式输出、权限弹窗、工具调用全部毫秒级推送。

WebSocket /ws

👆

深度触控优化

所有按钮最小 44x44px（Apple HIG）。Safe Area 全适配，不被刘海遮挡。

min-height: 44px

📐

三级响应式

768px 平板 / 480px 手机 / 触摸设备三套布局。手机自动隐藏次要功能。

3 breakpoints + touch

🔒

端到端加密

Tailscale 基于 WireGuard 协议。设备直连，Tailscale 自己也看不到你的数据。

WireGuard tunnel

手机端体验

不是「能打开网页」就算移动端适配。我们针对小屏幕和触控交互做了大量细节工作。

Claude Code

opus

帮我看看 server.ts 的内存泄漏

🔍 Grep · addEventListener

找到了。WebSocket handler 中每次 connection 都注册新 listener，但 close 时没清理。第 247 行。

帮我修复

已修复。在 close 事件中添加了 removeAllListeners() 调用。

输入消息...

↑

opus

📎

auto

viewport-fit=cover

全面屏内容延伸到边缘，用 env(safe-area-inset-*) 精确控制安全区内边距。

font-size: 16px 防缩放

输入框字号不低于 16px，避免 iOS Safari 自动缩放页面。这个细节大多数 Web App 会忽略。

惯性滚动

-webkit-overflow-scrolling: touch 启用原生滚动手感，聊天区域不会有「粘滞」感。

智能隐藏策略

480px 以下自动隐藏终端面板、调试探针、Transcript 切换，只保留核心对话 + 模型选择 + 附件。

横屏模式

检测 orientation: landscape + max-height: 500px，自动压缩输入区高度。

PWA：不只是「添加到主屏幕」

PWA 支持包含三个层次：

Web App Manifest — 定义应用名称、图标、启动画面颜色、display: standalone 全屏模式。
Service Worker — 缓存静态资源，离线时显示友好提示（虽然核心功能需要网络）。
iOS 特殊处理 — apple-mobile-web-app-capable、black-translucent 状态栏样式、禁用电话号码自动识别。

安装后从主屏幕启动时，@media (display-mode: standalone) 会触发额外的状态栏高度补偿，确保内容不被顶部时间栏遮挡。

快速开始

安装 Tailscale

电脑和手机都安装，用同一账户登录。

# macOS / Linux curl -fsSL https://tailscale.com/install.sh | sh sudo tailscale up # 手机: App Store / Google Play 搜索 Tailscale

启动 WebUI

用 --host 0.0.0.0 监听所有接口。

claude-code --web --host 0.0.0.0 # 终端输出 Tailscale 地址: 📱 Tailscale: http://100.x.x.x:3456

手机访问 + 添加到主屏幕

浏览器打开 Tailscale 地址，然后添加到主屏幕。

# iOS: Safari → 分享 → 添加到主屏幕 # Android: Chrome → 菜单 → 添加到主屏幕 # 全屏 PWA, 无地址栏 ✨

环境要求：Node.js 18+、Tailscale（电脑+手机）、iOS Safari / Android Chrome。不需要公网 IP，不需要域名，不需要 HTTPS 证书。

安全模型

Tailscale 使用 WireGuard 协议建立设备间的点对点加密隧道。关键安全特性：

零信任网络 — 每台设备有独立身份，不依赖网络位置。
设备直连 — 流量不经过 Tailscale 服务器（coordination server 只交换密钥，不中转数据）。
自动密钥轮换 — WireGuard 定期更换会话密钥，前向保密。
无暴露端口 — 不需要在路由器上开放端口，减少攻击面。

你的代码、对话记录、API 密钥，全部在你自己的设备之间流转，不经过任何第三方。

适用场景

移动端不是要取代桌面开发，而是在特定场景下非常有用：

通勤路上 — 让 AI 帮你审查昨晚的 PR，到公司直接 merge。
临时排查 — 半夜收到报警，手机上让 Claude 搜日志、定位问题、写修复。
代码审查 — 地铁上读代码，让 Claude 解释复杂逻辑、找潜在 bug。
学习探索 — 随时随地问技术问题，Claude 可以直接读你的项目代码回答。

核心价值是碎片时间利用 — 把等待和移动的时间变成生产力。