如何检测页面是否运行在浏览器「添加到主屏幕」类Web App中？

算力阿峰

2026-8-19

检测Web App是否运行在「添加到主屏幕」环境中

方法1：使用`window.matchMedia`检测显示模式

Chrome、Edge、Firefox等现代浏览器支持通过display-mode媒体查询识别Web App的运行状态，「添加到主屏幕」的应用通常会以standalone（独立窗口）模式启动：

if (window.matchMedia('(display-mode: standalone)').matches) {
  console.log('当前处于添加到主屏幕的Web App环境');
} else {
  console.log('当前在普通浏览器标签页中');
}

也可以直接用CSS适配独立模式下的样式：

@media (display-mode: standalone) {
  /* 仅在独立Web App环境生效的样式 */
  body {
    padding-top: 20px;
  }
}

方法2：检测`navigator.standalone`（iOS Safari专属）

iOS Safari的「添加到主屏幕」应用会暴露navigator.standalone属性，当应用以独立窗口运行时，该值为true：

if (window.navigator.standalone) {
  console.log('当前处于iOS添加到主屏幕的Web App环境');
}

多平台兼容的综合检测逻辑

结合两种方法，覆盖主流浏览器和平台：

function isStandaloneWebApp() {
  const isStandardStandalone = window.matchMedia('(display-mode: standalone)').matches;
  const isIOSStandalone = window.navigator.standalone === true;
  
  return isStandardStandalone || isIOSStandalone;
}

// 使用示例
if (isStandaloneWebApp()) {
  // 执行Web App专属业务逻辑，比如隐藏浏览器导航栏适配
}