使用PWABuilder制作的iOS原生PWA中@media (display-mode: standalone)失效如何解决？

• 改用JavaScript检测独立模式
  iOS通过PWABuilder打包的原生应用中，CSS媒体查询(display-mode: standalone)可能无法正常触发，但可以借助iOS专属的navigator.standalone属性来判断。示例代码如下：

  if (window.navigator.standalone) {
    document.documentElement.classList.add('standalone');
  }
  

  之后在CSS中通过这个类名替代媒体查询来编写样式：

  .standalone {
    /* 原@media (display-mode: standalone)下的样式内容 */
  }
  

• 核对PWABuilder打包配置
  确认manifest.json中是否正确设置了display: standalone，如果manifest配置错误，即使打包成原生应用，系统也不会识别独立模式状态。

• 借助WebView容器标记状态
  PWABuilder打包的iOS应用是WebView容器，可在打包时配置启动注入脚本，直接在应用启动时为根元素添加standalone类，无需依赖浏览器原生API触发检测。

内容的提问来源于stack exchange，提问作者O'Niel