Tailwind h-screen 在移动设备上无法正常工作

Question

h-screen应该将高度设置为屏幕高度的类在 iOS 上不起作用。有没有办法解决这个问题？

Answer 1

遇到同样的问题，发现我们可以使用dvh（动态视口高度）。

h-[calc(100dvh)]代替h-screen。

但是，最好添加后备，以防万一。

Answer 2

.inset-0我经常发现在类的内容之外设置绝对包装器很有用

<!-- this will use the whole viewport even in mobile -->
<div class="absolute inset-0">
    <div>
      lorem ipsum
    </div>
</div>

这个解决方案有一些非常奇怪的副作用，因为它要求开发人员将元素的位置设置为绝对。所以不，我认为这不是一个很好的解决方案，我会避免使用它，除非您知道使用它可能发生的每个潜在副作用（除了代码可能发生的每个潜在副作用之外）虽然听起来很糟糕，但从长远来看，您可能会通过避免使用绝对定位元素并使用 javascript 而不是 css 设置高度来避免麻烦。 (4认同)
这解决了我的“h-screen”问题，即内容在 Android 上的 Samsung Internet 中延伸到导航栏下方。现在它只填充导航栏上方可见的空间:) (2认同)

Answer 3

在您的应用程序负载上运行此 JavaScript 代码

document.documentElement.style.setProperty("--vh", window.innerHeight * 0.01 + 'px');

并将其放在您的全局样式中以覆盖 h-screen 类

.h-screen {
    height: 100vh; /* Fallback for browsers that do not support Custom Properties */
    height: calc(var(--vh, 1vh) * 100);
}

Answer 4

问题是h-screen用作100vh高度。正如此问题中提到的\xe2\x80\x99s 所示，100vh 的目标是不适用于移动设备。

\n\n

但是有一个方法可以欺骗它，但是它不会\xe2\x80\x99被添加到tailwind中，因为它需要JS。要了解有关此 \xe2\x80\x98trick\xe2\x80\x99 的更多信息，请查看此文章：在移动设备上查看端口单位的技巧

\n