Safari Mobile 应用程序横幅更改视口高度答案

【问题标题】：Safari Mobile app banner changes the viewport heightSafari Mobile 应用程序横幅更改视口高度
【发布时间】：2018-11-14 05:46:00
【问题描述】：

地址栏下方的横幅正在改变高度，甚至不是 DOM 的一部分。

底部的Position: fixed元素被隐藏。

您可以通过

查看

在Safari - iOS smart phones 中打开https://www.ounass.ae/clothing/
向下滚动以查看此应用横幅
点击Filter By按钮。

【问题讨论】：

您找到解决方案了吗？我知道这与通用链接有关，但还没有找到禁用或关闭栏的方法。
@TitoNobre 不幸的是没有

标签： javascript ios css dom mobile-safari

【解决方案1】：

我有同样的问题，但这可能不是解决方法，而是一种解决方法。

const updatePositionOfCtaButton = () => {
  if (
    window.navigator.userAgent.toLowerCase().includes('safari') &&
    window.navigator.userAgent.toLowerCase().includes('mobile') &&
    document.documentElement.clientHeight > window.innerHeight &&
    !document.hidden
  ) {
    document.querySelector('.callToActionButton').style.bottom = '44px';
  } else {
    document.querySelector('.callToActionButton').removeAttribute('style');
  }
}
window.addEventListener('scroll', updatePositionOfCtaButton);
document.addEventListener('visibilitychange', updatePositionOfCtaButton);

我们也可以在CTA按钮上添加transition来添加一点动画

.callToActionButton {
  transition: bottom 0.16s linear 0s;
}

【讨论】：

【解决方案2】：

你试过-webkit-fill-available

html {
  height: -webkit-fill-available;
}

body {
  display: flex; 
  flex-direction: column;
  margin: 0;
  min-height: 100vh;
  /* mobile viewport bug fix */
  min-height: -webkit-fill-available;
}

main {
  flex: 1;
}

<header>HEADER GOES HERE</header>
<main>MAIN GOES HERE</main>
<footer>FOOTER GOES HERE</footer>

【讨论】：