Use these instead of vh

The video discusses the challenges of using the vh (viewport height) unit in CSS for responsive design, especially on mobile devices. Here are the key takeaways:

• Problem with vh on mobile devices: The vh unit does not account for the dynamic nature of mobile browser UI elements, such as address bars, which can cause content to overflow offscreen, necessitating scrolling to view it even when 100vh is used.

• New CSS units: The presenter introduces three new CSS units to address these issues:

  1. dvh (dynamic viewport height) - Adjusts for the presence of UI elements, dynamically resizing as they appear or disappear when scrolling.
  2. svh (small viewport height) - Assumes UI elements are always present and does not adjust, resulting in no layout shifts when scrolling.
  3. lvh (large viewport height) - Behaves similarly to vh, assuming UI elements are not present, which can lead to content overflow.

• dv and dvh: dvh is ideal for mobile apps or layouts that require elements, such as menus, to stay anchored at the bottom. However, it can result in layout shifts (jumps in height) due to dynamic resizing.

• Use cases for svh: svh is seen as a practical solution for most websites since it prevents layout shifts and is more predictable for elements that should take the full viewport height.

• Limitations of lvh: lvh is not much different from vh and often results in content overflow because it assumes UI elements are always hidden.

• Switch from dvh to svh: The presenter mentions that they have shifted from using dvh to svh for most use cases because svh seems to solve more problems, especially for website layouts.

• Virtual keyboards are not accounted for: None of these new units consider the virtual keyboard's impact on viewport height.

• Browser support and fallbacks: While browser support for these units is good, for older browsers that do not support the new units, CSS can be written with vh as a fallback. Modern browsers will use the new unit like dvh or svh since it follows the initial vh declaration in the stylesheet.

• Encouragement for further learning: For those interested in other CSS units, the presenter mentions a video about container query units.

This video serves as a guide for web developers and designers looking for solutions to address the dynamic nature of mobile browsers and their effect on viewport height computations. The new CSS units offer methods to tackle these challenges and improve the mobile web experience.