This article is a translation of
this article. The translator is the front-end development engineer of 360 Qiwu Troupe.
Original Title: New Viewport Units
Original Author: Ahmad Shadeed
Original Address: https://ishadeed.com/article/new-viewport-units/
We've been using CSS viewport units since 2012. They are useful to help us resize elements based on viewport width or height.
However, using vh units on mobile devices is problematic. The reason is that the viewport size does not include the browser's address bar UI.
To fix this, we now have new viewport units. Let's learn about them in this article.
CSS Viewport Units
For example, when we need to resize an element according to the viewport size. The viewport units are vw, vh, vmin, and vmax.
Consider the following diagram:
A value of 50vw means: Give the element a width equal to 50% of the viewport width.
question
When resizing the element with 100vh to occupy the full height of the mobile viewport, it will be larger than the space between the top and bottom bars. This happens in browsers that shrink the UI when scrolling, such as Safari or Chrome on Android.
The image below shows how the top and bottom UI differ for each mobile browser.
Let's say we have a loading view that fills the entire screen.
/* 我知道我们可以使用bottom: 0代替height: 100vh，但这里是故意突出这个问题。 */
.loading-wrapper {
position: fixed;
left: 0;
right: 0;
top: 0;
height: 100vh;
display: grid;
place-items: center;
}Consider the following diagram:
The loading icon is centered in the CSS, but visually it appears to be slightly at the bottom. Why is this happening?
For browsers, height: 100vh means the element will fill the viewport height, but it will not calculate the value dynamically. This means the bottom address bar and toolbar won't be counted.
So we expect 100vh to be equal from the top of the viewport to the top of the address bar UI.
As we scroll down, the address bar UI shrinks its size. This is great because it gives users more vertical space to browse the page. At the same time, it also kind of breaks the UI.
In the image below, when the address bar is visible, the center of the vertical space is not as expected. When scrolling, it looks fine.
Notice how I've highlighted the invisible areas. It becomes visible when scrolling down. How to handle this in CSS?
Small, Large, and Dynamic Viewport Units
To address this, the CSS Working Group agreed to a new set of units: svh, lvh, and dvh. They represent small viewport, large viewport, and dynamic viewport respectively.
small viewport
svh represents the viewport height when the address bar UI has not been scaled down.
large viewport
lvh indicates the viewport height of the reduced size of the address bar UI.
dynamic viewport
From the name, this unit is dynamic. This means it will use small, middle and large units depending on whether the address bar UI is shrinking or not.
During initial scrolling, the dynamic viewport units will change as the browser UI shrinks. Here's a video showing dynamic viewport changes:
Use Cases and Examples
Popup with sticky header and footer
In this example we have a popup with a sticky header and footer. If the content is long enough, the middle part should scroll.
Consider the following CSS:
.modal {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 100vh;
}Using 100vh will make the bottom part of the popover invisible. In the example, this means that the footer will not be visible, which breaks the user experience.
Here's how traditional and new viewport units behave on iOS:
..plus Chrome and Firefox on Android:
To solve this problem, we can use svh or dvh units.
Here's a video that shows the difference between dvh and vh.
Home Banner
This is a common situation where we need to make the height of the homepage banner equal to the entire viewport height minus the header height. In this case, using traditional vh will fail in browsers such as iOS Safari, Firefox, and Chrome for Android that shrink the UI when scrolling.
First, we need to make sure the header height is fixed. I used min-height for this.
:root {
--header-height: 60px;
}
.site-header {
position: sticky;
top: 0;
min-height: var(--header-height, initial);
}After that, I add min-height to the homepage banner and use calc().
.hero {
min-height: calc(100svh - var(--header-height));
}When using vh, the decoration elements (purple) are not visible at all. In fact, if you look closely, you'll see that it appears blurry beneath the address bar UI in iOS Safari, and is cropped in Android browsers.
Here's a comparison of svh and vh on Safari iOS.
..plus Chrome and Firefox on Android:
Watch the video below and find out the difference between using svh and vh.
In this case, using svh will do the trick.
Is it possible to set Dvh as default unit?
At first, the answer was "yes, why not?". Then I thought, the dvh value changes as you scroll, so when it's used for something like font-size it can make for a confusing experience.
h1 {
font-size: calc(1rem + 5dvh);
}
Watch the following video and notice how the font size changes when the address bar UI shrinks:
Demo
Be careful with Dvh viewport units
Dynamic viewport units can affect the performance of the page because the browser spends a lot of work recalculating styles as the user scrolls up or down.
I haven't had a chance to do intensive performance testing, but I would use it with care. I wish I had time to update this here.
Other places where the new viewport units are useful
These new viewport units may not only apply to mobile browsers. In fact, you can now browse the web on your TV. Who knows what kind of browser will appear on the TV with a UI that changes when scrolling, resizing the viewport?
For example, here's a sample home banner viewed on Android TV:
Works great, even the dynamic UI continues to work.
- END -
About Qi Wu Troupe
Qi Wu Troupe is the largest front-end team of 360 Group, and participates in the work of W3C and ECMA members (TC39) on behalf of the group. Qi Wu Troupe attaches great importance to talent training. There are engineers, lecturers, translators, business interface people, team leaders and other development directions for employees to choose from, and supplemented by providing corresponding training on technical skills, professional skills, general skills, leadership skills, etc. course. Qi Dance Troupe welcomes all kinds of outstanding talents to pay attention to and join Qi Dance Troupe with an open and talent-seeking attitude.
