2024 November 13

I came across the dvh = „dynamic view height“ unit a couple of years ago, where the browser support was very bad.

Now we have about 95%, which should be enough for most projects – if not @supports should do the trick, so DVH could be used as an progressive enhancement.

This is particularly useful when dealing with mobile browsers that hide the address bar when scrolling.

See: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Values_and_Units

Credits @ Artur A on Stackoverflow.

• stackoverflow.com

Found a very nice solution on https://habr.com/en/sandbox/163605/ – seems to work very well if only required within CSS.

@media (pointer: coarse)  {
	/* mobile device */
}

@media (pointer: fine), (pointer: none) {
	/* desktop */
}

@media (pointer: fine) and (any-pointer: coarse) {
	/* touch desktop */
}

Check out https://habr.com/en/sandbox/163605/ for further information.