HTML怎么做Manifest显示模式_HTML Manifest display显示模式大全

display不是CSS属性，选错值会导致安卓fixed元素消失或无法添加到主屏幕；standalone最稳，兼容Android和iOS，支持theme_color和background_color；fullscreen需配viewport和orientation，minimal-ui已废弃，browser仅适合调试。

manifest.json 里的 display 不是 CSS 的 display，选错值会导致安卓上 fixed 元素消失、状态栏遮挡内容、甚至无法添加到主屏幕——这不是 bug，是规范行为。

standalone 是最稳的选择，但不是万能解

绝大多数 PWA 场景该用 standalone：它在 Android 和 iOS 上都表现一致，启动后无地址栏、无工具栏，fixed 定位元素（比如底部导航栏）能正常渲染和交互。

• Android Chrome 从 72+ 开始稳定支持 standalone，iOS Safari 从 iOS 16.4 起也支持（此前仅认 minimal-ui，但后者实际已废弃）
• 如果你的 PWA 依赖 position: fixed 做吸底/吸顶，fullscreen 或 minimal-ui 在某些安卓机型（尤其三星 One UI、小米 MIUI）会触发 viewport 计算异常，导致 fixed 元素被裁切或失焦
• standalone 下仍可通过 theme_color 控制状态栏颜色，background_color 控制启动屏背景，无需退回到 browser 模式来“保兼容”

fullscreen 模式要慎用，且必须配 viewport 和 orientation

fullscreen 真的会隐藏状态栏和导航栏，但代价是失去系统级返回手势、无法下拉通知栏、部分安卓机型会强制横屏或重置 viewport 缩放。

• 必须在 HTML 中显式声明：<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">，否则内容可能被状态栏区域裁掉
• 若应用本身不支持横屏，需在 manifest 中加 orientation: "portrait"，否则某些设备（如 Pixel）会无视该设置直接全屏拉伸
• Chrome for Android 从 93 起对 fullscreen 加了限制：只有满足「已安装」+「用户至少一次主动全屏操作」两个条件，才会真正隐藏系统 UI；否则降级为 standalone

minimal-ui 已实质废弃，别再用

minimal-ui 曾是 standalone 和 browser 之间的过渡方案，但现在所有主流浏览器（Chrome 89+、Edge 90+、Firefox 85+）已不再识别该值，会自动 fallback 到 browser 模式。

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

• MDN 明确标注 minimal-ui 为 deprecated，且没有 polyfill 可补救
• 如果你在旧项目里看到它，替换为 standalone 即可，无需额外适配
• 误用 minimal-ui 会导致 iOS 上无法触发「添加到主屏幕」提示，因为 Safari 认为这不是一个合格的 PWA 启动模式

browser 模式只适合调试或特定嵌套场景

browser 就是普通网页标签页，PWA 特性（如离线缓存、推送）仍可用，但用户感知不到“应用感”。它唯一合理用途是：你在 WebView 内嵌 PWA，且宿主 App 自己管理导航栏。

• 用 browser 时，start_url 必须是绝对路径（如 /app/），相对路径在跨域 iframe 或 WebView 中容易 404
• 如果 manifest 中设了 browser 却又配了 theme_color，Chrome 会在地址栏顶部显示色块，但 Safari 完全忽略——别指望它统一生效
• 测试阶段可以用它快速验证 service worker 是否注册成功，但上线前务必切回 standalone

真正容易被忽略的是：display 模式生效的前提是 start_url 可访问、service worker 已正确注册并控制页面、且页面响应头没带 Content-Security-Policy: sandbox 这类阻止 install 的策略。光改 manifest 里的 display 值，解决不了根本问题。