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

Question

The h-screen class which should set the height as the height of the screen doesn’t work on iOS. Is there a way to fix that ?

Answer 1

Often i find useful to set a absolute wrapper outside the content with a .inset-0 class

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

Answer 2

The problem is that h-screen uses 100vh as the height. As it’s mentioned in this question, 100vh aims to not work on mobile devices.

But there is a way to tricks it, but it won’t be added to tailwind because it needs JS. To know more about this ‘trick’ check this article : The trick to viewport units on mobile