如何搭建移动端友好的 Web 应用

移动端友好的 Web 应用，是一个在手机上像应用一样运行的网站：它能适应窄屏，拥有足够大的触控目标，在移动数据网络下快速加载，并且可以作为渐进式 Web 应用（PWA）添加到主屏幕。对于大多数新应用来说，这是切实可行的第一版：一套代码、一个链接，无需应用商店审核。不过它确实有局限，尤其是在 iPhone 上的通知功能和深层设备访问方面。本指南会坦率地说明，何时需要原生应用。

三种“适配手机”的方式

PWA 本质上是带有一些额外功能的响应式 Web 应用，因此你不必在前两者之间二选一。先做响应式，再让它可安装。如需更深入的对比，请参阅原生应用与渐进式 Web 应用。

Web 应用在手机上能做什么，不能做什么

浏览器的能力比很多人想象的要强：

• 相机和照片上传，通过标准的文件输入框实现。
• 位置信息，需经用户许可。
• 安装到主屏幕，带有图标并可全屏启动。
• 离线使用，通过 Service Worker（浏览器在后台为你的网站运行的脚本）缓存页面和数据来实现。
• 推送通知，但在 iPhone 上有一个限制。Apple 的 WebKit 团队表示，网页推送已在 iOS 和 iPadOS 16.4 中支持添加到主屏幕的 Web 应用。用户必须先安装应用，然后允许通知。

以下场景仍然是原生应用更有优势：

• 深层设备功能，例如后台定位、蓝牙配件、健康数据和主屏幕小组件。浏览器对这些功能的支持有限，且因平台而异。
• 应用商店发现。如果人们会在商店中搜索你，你就必须上架。
• 繁重的离线工作，例如需要在后台同步大量数据。
• 对性能要求极高的图形，例如大型游戏。

如果以上功能都不是你应用的核心，Web 应用很可能就能满足需求。

以手机为先的设计

先设计手机端布局，再让它在大屏上扩展；反过来做通常会导致手机屏幕显得拥挤。

布局

• 小屏幕使用单列。侧边栏改为底部导航栏或菜单。
• 不要左右滚动。宽表格改为卡片，或在自己的容器内滚动。
• 文字清晰可读，无需缩放。正文大约为 16px。

触控

• 点击目标要足够大。通常最小约为 44 x 44 像素。按钮之间要留出间距。
• 主要操作放在拇指可触及的范围内，在较高的手机上尤其靠近屏幕底部。
• 不要依赖悬停的功能。鼠标悬停才显示的提示和菜单在触摸屏上并不存在。
• 使用正确的键盘。邮箱输入框应弹出邮箱键盘，电话输入框应弹出数字键盘。请正确设置输入类型。

速度

• 使用合适尺寸的小图片，并在进入视口时再加载。
• 减少笨重的库。每增加一个库，都会增加移动数据下的下载时间。
• 使用骨架屏或清晰的加载状态，让应用不会看起来像卡死。

安全区域与地址栏

在现代手机上，内容可能会被刘海或底部指示条遮挡，在全屏安装的应用中尤其如此。请为安全区域添加内边距。还要注意，全屏高度的布局会在浏览器地址栏出现和隐藏时发生跳动。

使其可安装（PWA）

要使 Web 应用可安装，需要具备：

1. Web 应用清单（manifest）：一个记录应用名称、短名称、图标、主题色以及打开方式（通常为全屏“standalone”）的小文件。
2. 图标，尺寸符合各平台的要求，其中包括适用于苹果设备的图标。
3. HTTPS，任何正规托管的应用都已具备。
4. Service Worker，如果你希望支持离线使用或推送通知。

然后告诉用户如何安装。Android 浏览器通常会弹出安装提示或提供菜单项；在 iPhone 上，需要点击“分享”按钮，再选择“添加到主屏幕”。加上一段简短的“安装此应用”说明，会很有帮助。

离线支持是 PWA 较为复杂的地方。让应用页面在无网络时也能打开相对简单；但允许用户离线修改数据并在之后同步，就需要做大量工作。只有在用户确实需要时，才考虑这项功能。

给 AI 的第一条提示词

为我们的清洁团队搭建一个 Web 应用，用于查看当天的工单并标记完成。以手机为先进行设计：单列布局、大号触控按钮、主操作按钮固定在屏幕底部附近、没有仅限悬停的控件、无左右滚动，电话和邮箱输入框使用正确的键盘。每个工单显示地址（点击可在地图中打开）、客户电话（点击可拨打）、检查清单，以及一个可拍照的“标记完成”按钮。经理在笔记本电脑上登录分配工单；在宽屏上以表格代替卡片显示。将其做成可安装的 PWA，包含 manifest、图标和 standalone 显示模式，并缓存应用外壳，使其在无信号时也能打开。数据保存在数据库中。

搭建步骤

1. 先做手机端布局，使用样例数据，并在手机尺寸的预览中检查。
2. 在真实手机上测试，如果用户同时使用 iPhone 和 Android，至少各测一台。模拟器无法发现屏幕键盘遮挡输入框之类的问题。
3. 用单手完成主要任务。如果任何操作需要双手或缩放，就要修改。
4. 添加 manifest 和图标，然后在两个平台上安装，检查图标、名称和启动画面。
5. 确定离线策略。从“无信号时也能打开并显示清晰提示”开始；只有在需要时再添加离线编辑。
6. 在慢速网络下检查速度。浏览器的开发者工具可以模拟慢速网络。
7. 最后再添加通知，如果需要的话。同时为未安装应用的用户准备邮件备选方案。

常见错误

• 只在大显示器上设计。 应在开发过程中随时检查手机宽度下的每个屏幕。
• 表格溢出。 在小屏幕上应将行转换为卡片。
• 点击目标太小，链接靠得太近。
• 表单与键盘冲突：输入类型错误、字段被键盘遮挡、没有“下一项”的操作流程。
• 以为 iPhone 的推送可以在浏览器标签页中使用。 必须先将应用安装到主屏幕。
• 承诺提供无法上架的 App Store 应用。 如果商店很重要，应单独规划。
• 只是包装一个网站就称之为应用。 Apple 的 App Review Guidelines 要求应用提供超出简单重新包装网站的价值；过于单薄的封装有被拒的风险。

何时需要原生应用

在以下情况下，应采用原生应用（或在 Web 应用之后规划原生版本）：

• 客户主要通过应用商店找到你。
• 你依赖后台定位、蓝牙、健康数据、小组件或其他浏览器无法可靠提供的设备功能。
• 你的应用必须在很长时间内完全离线工作。
• 你的用户期望应用出现在商店中。有些用户群体就是不会使用不在商店里的应用。

应用商店发布有其自身的成本和步骤。根据 Apple 和 Google 官网的说明，截至 2026 年 9 月，Apple 开发者计划每年 99 美元，Google Play 开发者账户一次性 25 美元，而且每次发布都需要经过审核。许多团队会先以移动端友好的 Web 应用验证用户是否需要这款产品，然后再投入开发原生版本。如何用 AI 搭建应用完整介绍了这第一阶段。

使用 Mythex 搭建

Mythex 搭建 Web 应用：你在聊天中描述应用，并在桌面端的实时预览中检查，也可以在可调整大小的手机尺寸视图中查看。文档中有一份移动端响应式提示词，可用于修复小屏幕布局问题。你可以像添加其他功能一样要求添加 PWA 清单和图标，然后发布到一个在任何手机上都能访问的公开链接。在 Pro 套餐中，Mythex 还可以将应用封装为 Android 和 iPhone 应用，并提交到 Google Play 内部测试和 TestFlight。如需起步，可参阅AI Web 应用搭建工具或浏览应用模板。如需实例，请阅读如何搭建习惯追踪应用。

常见问题