旧版Chrome（低于M48）中检测standalone模式的方法咨询

没错，Chrome M48才正式支持通过matchMedia('(display-mode: standalone)')来检测PWA的独立运行模式，但针对更低版本的Chrome，我们可以用一些替代方案来近似判断，虽然不是100%精准，但能覆盖大部分场景：

• 利用窗口尺寸与屏幕可用高度的差值判断
  独立模式下，Chrome会隐藏地址栏、工具栏等浏览器UI，此时窗口的内部高度（window.innerHeight）会接近屏幕的可用高度（screen.availHeight）。我们可以结合这个特性，再辅助判断是否为移动端Chrome，来近似检测：

  function checkStandaloneMode() {
    // 优先使用原生支持的检测方式（兼容高版本）
    if (window.matchMedia && window.matchMedia('(display-mode: standalone)').matches) {
      return true;
    }
    // 低版本Chrome fallback逻辑
    const isMobileChrome = /Chrome/.test(navigator.userAgent) && /Mobile/.test(navigator.userAgent);
    const hasNoBrowserUI = window.innerHeight >= screen.availHeight - 10; // 留10px的误差空间
    // 排除iOS Safari的standalone情况（避免误判）
    const isNotSafariStandalone = !navigator.standalone;
    
    return isMobileChrome && hasNoBrowserUI && isNotSafariStandalone;
  }
  

  注意：这个方法可能会误判用户手动开启浏览器全屏的情况，所以如果需要更精准，可以结合后续的其他条件。

• 结合localStorage做启动标记
  当用户点击"添加到主屏幕"的提示后，我们可以在页面加载时检查是否是从主屏幕启动的——如果是第一次从主屏幕打开，我们可以在localStorage中存入一个标记，后续加载时通过这个标记辅助判断：

  function initStandaloneCheck() {
    if (checkStandaloneMode()) {
      localStorage.setItem('launchedFromHomeScreen', 'true');
      return true;
    }
    // 后续加载时，结合标记判断
    return localStorage.getItem('launchedFromHomeScreen') === 'true';
  }
  

  这个方法需要用户完成"添加到主屏幕"并启动的操作，无法在用户第一次访问时就检测，但能提升后续检测的准确性。

需要说明的是，这些方案都是近似检测，没有原生API那么精准，毕竟低版本Chrome没有提供官方的检测方式，所以需要根据你的业务场景选择合适的组合方案。

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