- Published on
CSS dynamic viewport units
- Authors
- Name
- Lucas Floriani
- @lucasfloriani13
CSS dynamic viewport units
What's new in CSS and UI - IO 2023 Edition
vh units doesn't work the way we intended with selecting the whole viewport, it sometimes selects more height than we want because of browser UI in mobile:
To resolve this issue, we now have new unit values on the web platform, including:
- Small viewport height and width (or
svhandsvw), which represent the smallest active viewport size. - Large viewport height and width (
lvhandlvw), which represent the largest size. - Dynamic viewport height and width (
dvhanddvw).
Dynamic viewport units change in value when the additional dynamic browser toolbars, such as the address at the top or tab bar at the bottom, are visible and when they are not.
Note that the dynamic viewport units do not take the presence of the Virtual Keyboard into account. From Chrome 108 you can set a meta-tag to change this behavior.
PS: Has good support from browsers