PWA独立模式下隐藏指定页面元素失效的解决方法

优先方案：CSS实现（推荐，性能更好） #

你之前写的display-mode: standalone媒体查询逻辑本身正确，失效基本是两个原因：

• 选择器优先级不足，被其他样式（比如UI框架自带类、其他自定义样式）覆盖
• 旧版iOS Safari不支持标准display-mode语法，需要加webkit前缀适配

直接用下面的代码，放到所有样式文件的最后引入即可：

/* 适配标准浏览器与iOS Safari */
@media all and (display-mode: standalone),
       all and (-webkit-display-mode: standalone) {
  /* 提高选择器权重，避免被覆盖 */
  #features.noShowApp {
    display: none !important;
  }
}

如果确认项目里没有其他高优先级样式强制设置该元素的display属性，可以去掉!important。

备选方案：JavaScript实现 #

你的PWA环境检测逻辑是正常的（alert能弹出说明已经识别到独立运行模式），元素没隐藏的核心问题是：原生JS没有全局hide()方法，这个是jQuery的专属方法，没引入jQuery的情况下这行代码会直接报错，无法执行隐藏操作。

修正后的原生JS代码如下，补全了iOS兼容和DOM加载判断，避免找不到元素：

function isRunningStandalone() {
  // 同时兼容标准浏览器与iOS Safari的判断
  return window.matchMedia('(display-mode: standalone)').matches 
      || window.navigator.standalone === true;
}

// DOM加载完成后再执行操作，避免元素未渲染就获取导致报错
document.addEventListener('DOMContentLoaded', () => {
  if (isRunningStandalone()) {
    const featureSection = document.getElementById('features');
    if (featureSection) {
      // 原生JS隐藏元素写法
      featureSection.style.display = 'none';
      // 如果需要彻底移除元素不占DOM位置，替换为 featureSection.remove() 即可
    }
  }
})

如果需要实时响应显示模式切换（比如用户在浏览器和PWA窗口间切换），可以给matchMedia结果绑定change事件，动态切换元素显隐状态。

内容的提问来源于stack exchange，提问作者Sjender