iOS 智能横幅导致底部工具栏与固定在屏幕底部的元素重叠

Question

我一直在寻找一天中最好的部分，以尝试找到解决此问题的方法，但无法解决。 所以我在这里。

基本上我正在研究一个组件，它是position: fixed; 移动浏览器视口 window 的底部。 这本身就是微不足道的。

问题是该公司的原生 iOS 应用程序有一个 Apple 关联文件，该文件显示 Apple 智能横幅以在页面顶部打开原生应用程序。

当这呈现给最终用户时，浏览器似乎重新定义了它作为页面底部的分类，因此，任何固定在页面底部的东西都会被出现的导航工具栏覆盖。

我能想到的唯一解决方案是写出所有 Apple 移动设备视口大小的列表，然后比较onresize事件上的window.innerHeight值的大小——这似乎绝对是矫枉过正，而且本身仍然有一些细微差别。

我添加了一些屏幕截图来说明问题以及我想要实现的目标。

提前感谢任何可以提供帮助的人。 我已经搜索了其他问题的答案，但他们似乎都是试图展示智能横幅或试图重定向到他们的应用程序的人。

Answer 1

通过利用文档 window 中的调整大小事件，然后将元素的top属性设置为window.innerHeight - element.clientHeight ，我设法找到了解决方案。

如果有更好、更高效的方法来实现这一点，我仍然希望听到答案，但出于所有意图和目的，我会将其标记为已回答。

在旁注中，这确实感觉像是 Safari 浏览器本身的一个错误，因为苹果似乎正在改变他们认为是文档bottom的内容。

解决方案：

window.onresize = () => {
  const button = document.querySelector(".add-to-bag--sticky");
  if (button) {
    button.style.top = `${window.innerHeight - button.clientHeight}px`;
  }
};