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`;
  }
};