htmlcsstailwind-css

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

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?

Solution

  • Faced the same problem, and found out that we could use dvh (dynamic viewport height).

    h-dvh instead of h-screen.

    However, it's better to add a fallback, just in case.

    UPDATE (2024):

    TailwindCSS now offers h-dvh, h-svh and h-lvh. Earlier, we had to do something like h-[calc(100dvh)].