如何检测iOS 15 Safari floating address bar的存在及具体位置？

目前没有官方提供的直接API可以读取浮动地址栏的显示状态、精确坐标，但可以通过以下间接方案实现需求：

核心检测逻辑 #

• 视口高度差判断
  Safari浮动地址栏显示、隐藏时，window.innerHeight 会同步变化，而 document.documentElement.clientHeight 不受地址栏显隐影响，通过两者的差值即可判断地址栏状态：

  // 差值大于0说明地址栏处于显示状态
  const isFloatingBarShown = window.innerHeight < document.documentElement.clientHeight
  // 差值即为地址栏占用的垂直高度
  const barHeight = document.documentElement.clientHeight - window.innerHeight
  

• 结合安全区域排除干扰
  为了避免底部手势安全区的高度干扰计算结果，可以结合CSS的env(safe-area-inset-bottom)变量做修正：
  先在CSS中声明变量：

  :root {
    --safe-bottom: env(safe-area-inset-bottom, 0);
  }
  

  再在JS中计算修正后的地址栏高度：

  const safeBottom = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--safe-bottom'))
  // 修正后高度大于0即可确认浮动地址栏处于显示状态
  const correctedBarHeight = barHeight - safeBottom
  

位置判断补充 #

如果需要区分地址栏是在顶部还是底部显示：
iOS 15+ Safari默认地址栏在底部，仅当用户手动修改设置后才会切换到顶部模式，你可以结合滚动行为辅助判断：页面向下滚动时地址栏自动隐藏，向上滚动时地址栏显示，默认场景下显示时处于底部，你可以根据业务需要对顶部模式的场景做降级适配。

提示：上述方案覆盖了99%以上的用户场景，仅当用户开启了网页全屏模式时会失效。

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