Higher than high

Imagine you’ve designed your web and have gone through it all in your favorite browser. Everything looks really good and you’re done. Then someone tests the same things on a real mobile device and the browsers toolbox is covering some of your content. Doh!

We all know we need to take into account the size of the screen and probably you’re using vh/vw for this. The problem with this is that the browser’s toolbar height is not taken into account on mobile devices. But luckily we have a nice solution with some other units.

body {
  /*Small viewport, 
  takes the address bar and the toolbar into consideration*/
  height: 100svh;
  widht: 100svw;
}

body {
  /*Large viewport, 
  doesn’t take the address bar and the toolbar into consideration*/
  height: 100lvh;
  widht: 100lvw;
}

body {
  /*Dynamic viewport, 
  adapts its value when the toolbars are visible or/and when they are not.*/
  height: 100dvh;
  widht: 100dvw;
}

They are all supported by the major browers, but one thing to know is that these don’t take the scrollbar into account. So you might want to use one unit value over the other. Go for it!