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

【问题标题】：Tailwind h-screen doesn’t work properly on mobile devicesTailwind h-screen 在移动设备上无法正常工作
【发布时间】：2020-08-02 03:15:40
【问题描述】：

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

【问题讨论】：

但是 iOS 上的浏览器是什么？什么版本的系统，什么设备？为测试提供一些小提琴也是个好主意
@chojnicki 我在我的 iPad Pro 和 iPhone 上都注意到了它，它们都在使用最新的 iOS/iPadOS 进行 safari。但这似乎会影响所有移动设备，请查看我的答案:)

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：