This content originally appeared on Manuel Matuzović - Web development blog and was authored by Manuel Matuzović
Using the viewport unit vh in desktop browsers is usually straight-forward, 100vh matches the height of the viewport. On mobile that's different because the viewport height changes depending on whether or not certain user interface elements are visible, 100vh doesn't always match the height of the viewport.
On mobile we have the small viewport and the large viewport. According to the spec, the small viewport is the viewport sized assuming any UA [User Agent/Browser] interfaces [for example the address bar] that are dynamically expanded and retracted to be expanded
.
The large viewport is the viewport sized assuming any UA interfaces that are dynamically expanded and retracted to be retracted
.
The problem with 100vh on mobile is that it doesn’t respect whether user interface elements are expanded or not. It usually always matches the large viewport. CSS introduces new viewport units to address that issue.
You can use svh for the small viewport and lvh for the large viewport.
div {
height: 100svh;
/* See result in the first screenshot */
}div {
height: 100lvh;
/* See result in the second screenshot */
}That's great, but depending on if and how the user interacts with the page, they might sometimes see the large viewport and sometimes the small viewport. Setting the height to either unit probably isn't what you want because the height changes dynamically. Instead, you want to use the third new unit dvh, which dynamically either matches svh or lvh.
div {
height: 100dvh;
}
This content originally appeared on Manuel Matuzović - Web development blog and was authored by Manuel Matuzović
Manuel Matuzović | Sciencx (2022-11-16T09:38:54+00:00) Day 38: vh, svh, lvh, and dvh. Retrieved from https://www.scien.cx/2022/11/16/day-38-vh-svh-lvh-and-dvh/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.