svh/lvh 单位在 iPhone 版 Chrome 上无法按预期工作

Question

我有一个英雄部分需要占据视口的整个高度。当我尝试使用新的

svh/lvh

单位时，尺寸调整似乎在桌面和移动设备 Safari 上正常工作。但是，我无法在移动版 Chrome 上实现预期行为（在 iPhone 上测试）。英雄部分最初显示正确，但当我向下滚动并且导航栏出现在底部时，它会调整大小（从而移动页面上的其他元素）。

这是英雄部分的容器：

<Box
      // ref={observe}
      sx={{
        width: "100vw",
        height: "100vh",
        width: "100svw",
        height: "100svh",
        position: "relative",
      }}
    >

使用

height: fill-available;

适用于 Chrome 移动设备，但在其他地方会崩溃。

我删除了后备

100vh

和

100vw

以确保移动浏览器使用正确的

svh

单位，确实如此。

有什么想法吗？

Answer 1

我同意你的观点，Safari 中的 svh 行为是理想的，因为这应该会导致最小的视口高度（svh 实际上代表“小视口高度”）。我通过使用 window.visualViewport 在页面初始渲染的 javascript 中解决了这个问题。您需要将其放在您知道元素和 VisualViewport 都可用的位置 - 可能会在 setTimeout 中延迟，但这取决于您渲染元素的方式。

if (window.visualViewport) {
   const elements = document.getElementsByClassName("your-small-view-height-div");
   for (let i = 0; i < elements.length; i++) {
      elements[i].setAttribute("style", `min-height: ${window.visualViewport.height}px`);
   }
} else {
   // add class to body and style with svh as a fallback somewhere with css
   document.body.classList.add("use-svh");
} 

您基本上在这里缓存了一次值，这就是我移动视图所需的。现在，这对于桌面表示可能没有用。但经过几天尝试各种方法后，这对我有用。