顺风h屏在移动设备上不能正常工作

Question

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

Answer 1

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

但是有一种方法可以欺骗它，但它不会被添加到顺风，因为它需要JS。要了解更多关于这个“技巧”的信息，请查看这篇文章：The trick to viewport units on mobile

Answer 2

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

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