display_override是web app manifest中声明pwa显示模式优先级的数组字段，非css属性；需在manifest.json中设为["window-controls-overlay","minimal-ui","standalone"]并保留fallback的display字段，仅chromium 119+支持wco，ios safari完全忽略该字段。
display-override 目前**不是标准 CSS 属性，也不被任何浏览器支持**。你在 Chrome DevTools 或某些 PWA 配置中看到的 display-override，其实是 Chrome 119+ 引入的 **Web App Manifest 新字段**，仅用于声明 PWA 的首选显示模式，**和 CSS 的 display 完全无关**——别试图在 CSS 里写 display-override: standalone，它会直接被忽略。
manifest.json 里的 display_override 怎么用
这是 Web App Manifest（manifest.json）中新增的数组字段，用来向浏览器申明「我支持哪些显示模式，并按优先级排序」。浏览器会从左到右尝试匹配，选第一个可用的。
常见写法：
{
"name": "My PWA",
"display_override": ["window-controls-overlay", "minimal-ui", "standalone"],
"display": "standalone"
}
注意：display_override 是数组，display 仍是必需的 fallback 字段（必须保留）。若浏览器不支持 display_override（如旧版 Chrome、Safari、Firefox），就会退回到 display 的值。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
"window-controls-overlay"：仅 Chromium 119+ 支持，启用 Win/Mac 原生窗口控件 + 自定义标题栏（需配合theme_color和background_color） -
"minimal-ui"：比browser少地址栏，但比standalone多系统 UI 元素；iOS Safari 不支持该值，会降级 -
"standalone"：最常用，隐藏浏览器 UI，像原生 App；Android Chrome、iOS Safari 都支持
为什么加了 display_override 却没生效
典型原因不是代码写错，而是环境或配置卡在中间环节：
- 没在
正确 link manifest：<link rel="manifest" href="/manifest.json">，且路径返回 200 +Content-Type: application/manifest+json - 服务未开启 HTTPS（PWA 强制要求，localhost 除外）
- Chrome 版本低于 119，或启用了
chrome://flags/#enable-desktop-pwas-display-override（旧版需手动开启，119+ 默认开启） - iOS Safari 完全忽略
display_override数组，只认display；它也不支持window-controls-overlay - 已安装的 PWA 不会自动更新 manifest —— 必须卸载后重装，或清空 Chrome 的「站点设置 → 清除数据」再访问
display_override 和 display 冲突吗
不冲突，是协作关系。浏览器行为逻辑是：
- 读取
display_override数组（如果存在且浏览器支持） - 逐项检查每个值是否被当前平台支持且允许（例如
window-controls-overlay要求short_name存在且长度 ≤ 12） - 选第一个合法值作为最终显示模式
- 若数组不存在 / 全部不支持 / 浏览器太老 → 回退到
display值
所以 display 不是冗余项，而是兜底必需项。删掉它会导致 manifest 解析失败，PWA 安装按钮消失。
真正容易被忽略的是：这个字段只影响「安装后打开」的行为，对网页内嵌 iframe、window.open() 或普通 tab 打开完全无效；另外，window-controls-overlay 模式下，CSS 里用 env(safe-area-inset-top) 获取标题栏高度才安全，硬写 padding-top: 48px 会错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
