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

monwx1rj 于 2023-05-27 发布在 Java

关注(0)|答案(3)|浏览(149)

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

底部的Position: fixed元素被隐藏。
您可以通过以下方式查看
1.在Safari - iOS smart phones中打开https://www.ounass.ae/clothing/
1.向下滚动以查看此应用程序横幅
1.点击Filter By按钮。

JavaScript

来源：https://stackoverflow.com/questions/53293864/safari-mobile-app-banner-changes-the-viewport-height

3条答案

按热度按时间

pgpifvop1#

你试过-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>

赞(0）回复(0）举报 2023-05-27

ergxz8rk2#

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

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

我们还可以将transition添加到CTA按钮，以添加一点动画

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

赞(0）回复(0）举报 2023-05-27

bf1o4zei3#

也许新的dvh css单元可以在这里提供帮助。
更多信息checkout https://web.dev/viewport-units/

赞(0）回复(0）举报 2023-05-27

我来回答

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

3条答案

相关问题

热门标签

最新问答