问题描述
我一直在寻找一天中最好的部分,以尝试找到解决此问题的方法,但不能。所以我来了。
基本上我正在处理一个位于移动浏览器视口窗口底部 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`;
}
};