apple-mobile-web-app-title 是 iOS Safari 专用 meta 标签，用于定义网页添加到主屏幕后的图标名称；它仅在 iOS 生效，需置于 head 中 title 之后、apple-touch-icon 之前，content 值建议≤12 字且无多余符号。

apple-mobile-web-app-title 是什么，为什么移动端需要它

这个 meta 标签只在 iOS Safari（以及部分基于 WebKit 的 iOS 浏览器）中生效，用于定义用户将网页添加到主屏幕后，图标下方显示的名称。它不改变网页标题（<title>），也不影响 Android 的 PWA 名称——Android 看的是 manifest.json 中的 name 或 short_name。

如果你没加这个标签，iOS 会默认截取 <title> 的前 12–15 个字符作为主屏名称，经常被截断或包含无关符号（比如“|”“—”后面的内容就丢了）。

怎么写才生效：位置、语法和常见错误

必须把 <meta name="apple-mobile-web-app-title" content="你的应用名"> 放在 <head> 中，且**要在 <title> 之后、任何 <link rel="apple-touch-icon"> 之前**（顺序错可能导致 iOS 忽略）。内容值建议控制在 12 字以内，避免空格开头/结尾、全角标点或 emoji（iOS 可能渲染异常或回退到截取 title）。

• ✅ 正确：<meta name="apple-mobile-web-app-title" content="小记事">
• ❌ 错误：<meta name="apple-mobile-web-app-title" content="小记事 - 每日灵感">（含短横线易被截断）
• ❌ 错误：<meta name="apple-mobile-web-app-title" content="小记事　">（末尾全角空格）
• ❌ 错误：放在 <body> 里，或放在 <title> 前面

它和 web app manifest 的 name 冲突吗

不冲突，但作用域完全不同：apple-mobile-web-app-title 只影响 iOS 主屏幕图标文字；manifest.json 中的 name 影响 Android PWA 安装界面、桌面 PWA 标题栏，以及部分桌面浏览器的安装提示。两者可以不同，但建议保持一致以减少维护成本。

立即学习“前端免费学习笔记（深入）”；

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

注意：即使你已配置了 manifest.json，iOS Safari 仍完全无视它——它只认这个 meta 标签。所以不能省略。

如果你同时支持 iOS 和 Android，最小可行配置是：<title>（页面标题）、<meta name="apple-mobile-web-app-title">（iOS 主屏名）、<link rel="manifest" href="/manifest.json">（其中含 name 和 short_name）。

验证是否生效的实操方法

真机测试是唯一可靠方式：用 iPhone 打开网页 → 点击分享按钮 → 选择「添加到主屏幕」→ 回到桌面查看图标下方文字。模拟器或桌面 Safari 的「添加到主屏幕」行为不可靠，常显示 <title> 而非 content 值。

• 如果看到的是预期名称，说明标签位置、拼写、编码都正确
• 如果仍是截断的 <title>，先检查是否漏了 name 属性（写成 name="apple-mobile-web-app-capable" 就无效）
• 如果名称显示为乱码，确认 HTML 文件保存为 UTF-8 编码，且 <head> 中有 <meta charset="utf-8">

iOS 对这个标签极其严格：大小写敏感、属性名不能缩写、content 值不支持 JS 动态注入（必须服务端渲染或静态写死）。