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

Question

我一直在寻找一天中最美好的时光，试图找到解决这个问题的方法，但我做不到。所以我来了。

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

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

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

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

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

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

Answer 1

我设法通过利用文档 window 中的调整大小事件找到解决方案，然后将元素的 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`;
  }
};

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

iOS Smart Banner Causes Bottom Toolbar to Overlap Elements which are Fixed to Bottom of Screen

javascript

css

ios

mobile-safari

smartbanner