The New CSS Viewport Units that Solve Mobile Layout Issues Quiz

Explore how modern CSS viewport units like lvh, svh, and dvh provide reliable solutions for mobile layouts, replacing the broken 100vh trick. Learn key distinctions, practical uses, and limitations for responsive design.

1. Problem with 100vh on Mobile Devices

   Why does using 100vh for a full-screen hero section on mobile often result in content being hidden behind the address bar?

   1. 100vh includes browser scrollbars by default.
   2. 100vh only works with JavaScript enabled.
   3. 100vh is smaller on mobile than desktop due to screen size.
   4. 100vh ignores the space taken by visible browser UI elements like the address bar.

   Explanation: 100vh is measured as if browser UI (such as the address bar) is retracted, not accounting for their actual presence, which hides content below them. It's not determined by overall screen size, does not include scrollbars specifically, and does not depend on JavaScript.

2. Purpose of Large Viewport Units

   Which scenario is best suited for using large viewport units (lvh, lvw) in a layout?

   1. Smoothing scroll-based animations.
   2. Creating a fullscreen modal overlay.
   3. Making a sticky bottom navigation bar always visible.
   4. Sizing sidebars for desktop monitors.

   Explanation: Large viewport units represent the size with all browser chrome retracted, ideal for fullscreen overlays like modals. Sticky bars need guaranteed visibility, best with sv units. Scroll animations can jitter with dynamic units, and sidebars are unrelated to viewport chrome.

3. Feature of Small Viewport Units

   What is a key characteristic of small viewport units (svh, svw) in CSS?

   1. They shrink whenever content scrolls.
   2. They always match the size of lvh units.
   3. They cause layout shifts when address bar retracts.
   4. They cover the minimum guaranteed visible area, regardless of browser UI state.

   Explanation: sv units ensure content stays visible even when browser UI is expanded, perfectly suiting persistent elements like headers. They do not shrink with scroll, do not match lvh (which is bigger), and do not cause layout shifts.

4. Role of Dynamic Viewport Units

   How do dynamic viewport units (dvh, dvw) behave when the mobile browser's address bar appears and disappears?

   1. They require a JavaScript update to change.
   2. They always equal the largest possible viewport size.
   3. They adjust in real-time to match the actual visible area.
   4. They stay fixed to the minimum viewport size.

   Explanation: Dynamic units update as the browser UI slides in or out, providing an up-to-date match with visible screen space. lvh is always at maximum size, svh stays at minimum, and no JavaScript is needed for dvh/dvw updates.

5. Drawback of Using JavaScript for Viewport Sizing

   Why was the old JavaScript workaround for mobile viewport sizing considered a 'band-aid' solution?

   1. It guaranteed pixel-perfect sizing on all devices.
   2. It caused layout shifts and relied on JS running before first paint.
   3. It offered better performance than CSS.
   4. It worked well but was only supported by Chrome.

   Explanation: The JavaScript hack caused unwanted visual shifts and required early script execution, making it unreliable. It was not faster than CSS, didn't work exclusively in Chrome, and didn't ensure perfect sizing.

6. Appropriate Use Case for Small Viewport Units

   If you want a bottom cookie consent banner to always remain visible above any browser UI, which CSS unit family should you choose?

   1. dvh
   2. lvh
   3. vh
   4. svh

   Explanation: svh units guarantee the banner remains above any UI such as toolbars or address bars. lvh could be hidden under browser UI, dvh updates but may not always offer guaranteed visibility, and vh is unreliable on mobile.

7. Behavior of Dynamic Units During Scrolling

   Why should you avoid tying scroll animations directly to dvh changes?

   1. Using dvh can cause content to disappear on desktop.
   2. dvh does not update when the address bar retracts.
   3. Browsers debounce dvh updates for smoother transitions, not animating at 60fps.
   4. dvh units are deprecated in newer CSS versions.

   Explanation: Browsers intentionally smooth dvh changes to avoid jitter, so real-time animations tied to it can appear laggy. dvh units are not deprecated, do not hide content on desktop, and do update with address bar changes.

8. Effect of 100lvh on a Modal

   What happens if you set a fullscreen modal's height to 100lvh on mobile?

   1. The modal only appears on desktop devices.
   2. The modal fills the entire screen, including space behind retracted UI.
   3. The modal is always clipped by visible browser UI.
   4. The modal resizes with every scroll event.

   Explanation: 100lvh expands to the largest viewport possible, completely covering the screen when UI is hidden. It does not guarantee visibility above UI, does not resize with every scroll, and works on mobile, not just desktop.

9. Recommended Unit for Initial Hero Section

   Which CSS unit would you use to size a hero section so all content is visible when a mobile page first loads, with nothing hidden below the fold?

   1. lvh
   2. 100vh
   3. dvh
   4. svh

   Explanation: svh ensures the hero section fits entirely within the space not obscured by browser UI at page load. lvh may hide elements under the chrome, 100vh suffers from old mobile limitations, and dvh could expand beyond the visible area as the UI retracts.

10. Function of Large, Small, and Dynamic Viewport Units

    What do the new lvh, svh, and dvh units allow web developers to do?

    1. Change text color based on browser themes.
    2. Automatically crop images to fit any device size.
    3. Precisely target different browser viewport states to improve layout reliability on mobile.
    4. Optimize JavaScript performance for scrolling.

    Explanation: These units let developers confidently design for maximum, minimum, or dynamic viewport sizes, solving long-standing layout problems. They do not crop images, are not about JavaScript, and do not control color themes.