Css3 100vh not constant in mobile browser

html

responsive-design

css

viewport-units

byAnton Shumikhin·Nov 16, 2024

To preserve a consistent view height on mobile, irrespective of the address bar's behavior, one solid strategy involves JavaScript. This sets the viewport height as a CSS variable, aligning with the window.innerHeight. Use this script:

// This is how we roll - Listening to resize events
window.addEventListener('resize', () => {
  // Sizing it up: viewport is set to window's innerHeight
  document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`);
});

Integrate --vh in your CSS for unperturbed full-height elements:

.element {
  // Busting 100vh- Keep the height at actual visible part of screen
  height: calc(var(--vh, 1vh) * 100);
}

This assures that .element steadily fills the visible section, neutralizing the address bar's inconstancy.

The Mobile Viewport Conundrum: Why 100vh isn't stable

Mobile browsing brings with it a unique challenge - the ever-changing presence of the browser's top address bar. This can lead to a roller coaster effect for elements sized with 100vh. Certain mobile browsers like Chrome and Safari, are deliberately designed to alter their heights when UI components slide into or out of sight. This instability may cause an undesirable jumpy user interface and unintentional layout repaints.

These inconsistencies underline the advisability of avoiding 100vh for stable-height elements on mobile screens. Instead, contemplate alternative CSS tactics, such as min-height: -webkit-fill-available; providing a more certain height by commandeering the full available space on a mobile browser.

Developers seeking dependable viewport units on mobile could experiment with lvh, svh, dvh. These units are currently under the experimental flag in Chrome but point the way to steady viewport units.

Adapting with media queries and advanced CSS

In order to cater to not only screen size alterations but also changes in mobile browsers' display methods, media queries can be wielded with dexterity. Advanced CSS techniques, for instance, calc(300vh - 100vh), can further enhance responsive design. Also, don’t disregard the behavior of 100vh with respect to iOS homescreen applications and orientation shifts.

Google I/O 2022 has enlightened us about fresh viewport units and how they can be utilized, auguring well for a time when mobile browsers may provide more solid control over viewport heights. Staying updated with the latest and evolving CSS solutions is imperative.

Implementing JavaScript for Consistent Heights

To ensure height stability, JavaScript comes to our rescue. By employing the window’s innerHeight, you can define a customizable CSS variable that accurately portrays the visible screen space. A resize event listener then enables your webpage to react in real time to such height fluctuations, regardless of orientation changes or visibility of browser UI components.

However, such a solution warrants comprehensive testing across devices, given that different browsers might trigger resize events at varying times. Resources like Can I use should be your go-to for checking cross-browser compatibility. Plan fallbacks for browsers that do not support the features.

Emerging viewport units: `lvh`, `svh`, `dvh`

Here are the new units in town, each holding promises for tweaking viewport heights:

lvh (Least Viewport Height): This unit ignores UI elements and offers a consistent height based on the smallest possible viewport.
svh (Smallest Viewport Height): This unit hinges on the shortest dimension of the screen, ensuring that content remains visible during transitions.
dvh (Dynamic Viewport Height): This unit updates dynamically with browser UI visibility, making it optimal for app design on mobile browsers.

However, remember these units are supported under an experimental flag in Chrome and are not a standardized feature yet. Staying updated on their progress could give you an advantage in the near future.

Common pitfalls and considerations

Despite these solutions, there are still a couple of challenges to note:

iOS Home Screen Apps: Web apps saved to the home screen may interpret viewport units differently - consider rigorous testing.
Orientation Change: Transitioning between portrait and landscape can cause unexpected layout shifts.
Browser Updates: Regularly check for news from browser vendors about viewport unit interpretations, as these standards can change.

explain-codes / Html / Css3 100vh not constant in mobile browser

Linked

100vh height when address bar is shown - Chrome Mobile



Styling HTML and BODY selector to height: 100%; vs using 100vh



How do you give iframe 100% height



How to get the browser viewport dimensions?



Making a div vertically scrollable using CSS

