如何检测网页是在应用内浏览器还是常规浏览器中打开？

针对Slack这类User Agent与常规浏览器一致的应用内浏览器，可以通过以下几种可靠方法结合判断：

• 检测浏览器API的环境差异
  很多应用内浏览器会裁剪或修改常规浏览器的API集合。以Chrome系的应用内浏览器为例，常规Chrome会暴露window.chrome.runtime或window.chrome.app属性，但Slack的内置浏览器通常不会提供这些。结合UA检测的代码示例：

function isInAppBrowser() {
  const userAgent = navigator.userAgent;
  // 先排除已知主流浏览器标识
  const isKnownBrowser = /Firefox|Chrome|Safari|Opera|Edge|Trident/.test(userAgent);
  
  if (!isKnownBrowser) return true;
  
  // Chrome系应用内浏览器检测
  if (/Chrome/.test(userAgent)) {
    return !window.chrome?.runtime && !window.chrome?.app;
  }
  
  // iOS平台补充检测
  if (/iPhone|iPad|iPod/.test(userAgent)) {
    // Safari独立模式下standalone为true，应用内浏览器通常为false
    return !navigator.standalone && /Safari/.test(userAgent);
  }
  
  return false;
}

• 通过窗口与屏幕尺寸差判断
  应用内浏览器一般会自带顶部导航栏或底部操作栏，导致可用窗口高度远小于屏幕实际高度。通过计算两者的差值可以辅助判断：

function isInAppBrowserBySize() {
  const heightDiff = screen.height - window.innerHeight;
  // 阈值可根据设备类型调整，这里以100px为例
  return heightDiff > 100;
}

注意：该方法可能受用户手动调整窗口大小影响，建议和其他方法组合使用。

• 检测隐藏的应用标识
  部分应用内浏览器会在navigator.appVersion或navigator.vendor中隐藏自身标识，比如Slack可能会在这些字段中包含相关字符串：

function isSlackInApp() {
  return navigator.appVersion.includes('Slack') || navigator.vendor.includes('Slack');
}

• 组合多种方法提升准确率
  单一方法容易出现误判，建议结合多种检测逻辑：

function detectInAppBrowser() {
  const apiCheck = isInAppBrowser();
  const sizeCheck = isInAppBrowserBySize();
  const slackCheck = isSlackInApp();
  
  // 满足至少两种检测条件则判定为应用内浏览器
  return (apiCheck + sizeCheck + slackCheck) >= 2;
}

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