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

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

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

基本上我正在处理一个位于移动浏览器视口窗口底部 position: fixed; 的组件。这本身就是微不足道的。

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

当它呈现给最终用户时，浏览器似乎将其分类为页面的底部，因此，固定在页面底部的任何内容都是与出现的导航工具栏重叠。

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

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

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

解决方法

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

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

顺便说一句，这确实感觉像是 Safari 浏览器本身的一个错误，因为 Apple 似乎正在改变他们认为是文档 bottom 的内容。

解决方案：

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