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 ?

But what browser on iOS? What version of system, what device? Also it would be good idea to provide some fiddle to tests — chojnicki, Apr 19 '20 at 17:26
@chojnicki I noticed it on my iPad Pro and iPhone both on safari with the latest iOS/iPadOS. But it appears to affect all mobile devices, check my answer :) — Pol, Apr 20 '20 at 18:28

score 12 · Answer 1 · answered Mar 06 '21 at 01:29

12

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>

answered Mar 06 '21 at 01:29

NEOJPK

539
1
6
15

This fixed my issue with `h-screen` where content was extending below the navigation bar in Samsung Internet on Android. Now it only fills the space visible above the navbar :) – mrossman Aug 17 '21 at 18:13
This worked just fine. Chrome, iOS! – Lucas L. Nov 30 '21 at 14:26
You are a lifesaver bro goodjob. – code.cycling Dec 10 '21 at 13:11

score 3 · Accepted Answer · answered Apr 20 '20 at 13:10

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

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

2 Answers2