1

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

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

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

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

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

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

期望的结果

实际发生了什么

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

4

1 回答 1

0

我设法通过利用文档窗口中的调整大小事件然后将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`;
  }
};
于 2021-06-15T14:54:48.500 回答