Incorrect viewport height on mobile devices
Mobile devices have a dynamic viewport height because "the viewport size is influenced by the presence or absence of dynamic toolbars."(web.dev: Viewport Units).
To ensure the correct height (and width) instead of vh
and vw
the best and easiest solution would be tto use dynamic viewport units dvh
and dvw
to cover mobile devices.
Since this units are very new they aren't yet supported by all browsers. Major browsers support them since 2022(See https://caniuse.com/viewport-unit-variants). Therefore a fallback with vh
or another height unit or variable is needed.
Currently this leads to too much height where 100vh
is used, e.g. in the room navigation outlet or at the global sidenav:
Edited by Lukas Weingarten