时间戳

首页 > 解决方案 > 屏幕方向更改后如何在 iOS Safari 上保持应用全屏显示

javascript - 屏幕方向更改后如何在 iOS Safari 上保持应用全屏显示

问题描述

我使用目标浏览器组 - iOS（移动）Safari 构建了一个应该始终占据屏幕高度 100% 的 SPA。height:100vh在 iOS Safari 上无法正常工作 -

CSS3 100vh 在移动浏览器中不恒定

https://css-tricks.com/css-fix-for-100vh-in-mobile-webkit/

关于某些资源的建议解决方案-webkit-fill-available没有帮助。

因此，我决定用JS来控制app容器的高度：

const [height, setHeight] = useState(window.innerHeight);

  const handleWindowSizeChange = () => {
    setHeight(window.innerHeight);
  };
  useEffect(() => {
    window.addEventListener("resize", handleWindowSizeChange);
    return () => window.removeEventListener("resize", handleWindowSizeChange);
  }, []);
  return (
    <div className="App" style={{ height: height }}>
      <header className="top"></header>
      <div className="main"></div>
      <footer className="bottom"><button>Click</button></footer>
    </div>

我的解决方案一直有效，直到我们将屏幕从纵向旋转到横向，然后再旋转回纵向。在这些旋转之后，我们在屏幕视图的底部有一个间隙，就在应用页脚的正下方。如果我们打开一个演示 - https://react-div-100vh.vercel.app/用于应该解决问题的包，可以注意到相同的行为，并进行相同的屏幕旋转。

浏览器：Safari 14.6 iOS/iPhone 7

存储库

实时应用

代码沙盒

标签： javascriptcssreactjsmobile-safari

解决方案

iOS Safari 上的视口高度很棘手。

根据用例，-webkit-fill-available可以工作（见文章）。

我主要必须使用这个 JavaScript/CSSvar修复：

.my-element {
  height: 25vh;
  height: calc(25 * var(--vh, 1vh));
}

<script type="application/javascript">
  function handleResize () { window.document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`); }
  window.onresize = handleResize
  handleResize()
</script>

灵感：https ://css-tricks.com/the-trick-to-viewport-units-on-mobile/

推荐阅读