iOS 15 Safari如何编程检测用户选择的是标签栏还是单个标签模式？

目前没有苹果官方公开的API支持直接通过JS、HTML或CSS判断用户选择的是标签栏模式还是单标签模式，但可以通过两种模式的视口特征差异实现间接检测，准确率足够支撑业务适配需求。

JavaScript检测实现 #

你可以通过初始状态下的视口高度差值判断模式，参考代码如下：

function isIOS15SafariTabBarMode() {
  // 先校验是否为iOS 15+ 原生Safari环境
  const ua = navigator.userAgent;
  const isTargetEnv = /OS 15(_\d+)* like Mac OS X/i.test(ua) 
    && /Safari/i.test(ua) 
    && !/(CriOS|FxiOS|EdgiOS|MicroMessenger)/i.test(ua);
  
  if (!isTargetEnv || window.scrollY !== 0) {
    // 非目标环境或页面已滚动时不做检测，可返回缓存的历史结果
    return false;
  }

  // 计算屏幕可用高度与视口高度的差值
  const heightDiff = screen.availHeight - window.innerHeight;
  // 单标签模式差值约为90px（状态栏+顶部地址栏），标签栏模式差值约为140px（额外增加底部标签栏高度）
  return heightDiff > 120;
}

使用注意事项 #

• 检测仅在页面初始化、未滚动、键盘未唤起时准确率最高，建议首次执行后将结果缓存，后续直接使用缓存值即可
• 不同尺寸的iOS设备差值阈值略有差异，可根据自己适配的设备范围微调120的判断阈值，进一步提升检测准确率
• 如果仅需要解决视口被遮挡的布局问题，无需判断模式，可直接使用CSS的env(safe-area-inset-bottom)变量做底部安全区适配，系统会自动适配两种模式的布局

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