移动Safari应用横幅更改视口高度

Question

位于地址栏下方的横幅会改变高度，而且并不在DOM中。

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

您可以通过以下步骤查看：

1. 在Safari - iOS智能手机中打开https://www.ounass.ae/clothing/
2. 向下滚动以查看此应用横幅
3. 点击筛选条件按钮。

- w3debugger

---

你找到解决方案了吗？我知道这与通用链接有关，但还没有找到禁用该栏或关闭它的方法。 - Tito Nobre

很遗憾，@TitoNobre，不行。 - w3debugger

Answer 1

你尝试过使用-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>

- Jose Ch.

Answer 2

我也遇到了同样的问题，但这可能不是解决方法，只是一种解决办法。

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

- Neo Genesis

Answer 3

也许新的dvh css单位可以在这里提供帮助。

欲了解更多信息，请查看https://web.dev/viewport-units/

- user4617883