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

Question

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

Answer 1

问题是 h-screen 使用 100vh 作为高度。正如中提到的，100vh 旨在不在移动设备上工作。

但是有办法骗过它，但是不会加入tailwind，因为它需要JS。要了解有关此“技巧”的更多信息，请查看这篇文章：The trick to viewport units on mobile

Answer 2

我经常发现在内容之外设置一个绝对包装很有用 .inset-0 class

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

Tailwind h-screen doesn’t work properly on mobile devices