能否通过CSS或JavaScript检测Safari是否开启紧凑标签页？

首先明确：苹果目前没有提供公开的官方API或CSS媒体查询来检测Safari的紧凑标签页（Compact Tabs）模式。

不过你可以尝试一些非官方的近似检测思路，基于紧凑标签页模式下页面布局的特征变化：

• 紧凑标签页模式中，页面内容会直接贴合窗口顶部（融入UI边框），而普通标签页模式下顶部会有标签栏的高度占用。你可以通过判断页面根元素的顶部偏移来做近似检测：

  function isSafariCompactTabs() {
    // 先判断是否为Safari浏览器（排除Chrome等伪装Safari的UA）
    if (!navigator.userAgent.includes('Safari') || navigator.userAgent.includes('Chrome')) {
      return false;
    }
    // 紧凑标签页模式下，文档根元素的顶部偏移通常为0
    // 普通标签页模式下会有正数偏移（对应标签栏的高度）
    const docTop = document.documentElement.getBoundingClientRect().top;
    // 可根据实际测试调整阈值，适配不同设备/系统版本
    return docTop <= 1;
  }
  

• 另一种思路是对比窗口可视高度与屏幕可用高度的差值：紧凑标签页模式下，这个差值会远小于普通标签页模式（因为没有额外的标签栏高度）。但这种方法受窗口缩放、多桌面布局等因素影响较大，可靠性更低。

需要注意的是，这类非官方检测方法没有长期稳定性保障——Safari的版本更新可能会修改布局逻辑，导致检测逻辑失效。如果你的需求优先级很高，也可以考虑在页面中添加一个手动开关，让用户自行选择是否启用侧边栏圆角效果。

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