100vh on responsive website
I. What’s wrong with it
I believe you have once in your life built a responsive web. In case you haven’t, responsive web design aims to make web pages render well on a variety of devices and window or screen sizes from minimum to maximum display size to ensure usability and satisfaction.
So what’s wrong? There was nothing wrong if you use an android device, on PC, or when you test mobile responsive on your PC, but on ios devices, there was this problem where the scroll area is not the actually the area you expected it to be when you use 100vh and developers had to rely on workarounds to solve this bug.
With toolbar and url bar, scroll section becomes taller than expected. (I’ll call this case 1)
When scrolling down these dynamic toolbars will retract. In this state, elements sized to be 100vh tall will cover the entire viewport. (I’ll call this case 2)
II. What changed
There are additional relative length units in the CSS Values and Units Level 4 specification. This make it easier to scale from one output environment to another. With these specifications, we now have small viewport (for case 1) and large viewport (for case 2).
III. How to implement
This part is actually the main point i want to share
From now on, when you build responsive web design and need to use 100vh, PLEASE consider using 100dvh instead. It will help to dynamically adapt to your device view port and avoid above bug.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
min-height: 100dvh;
max-height: 100dvh;
overflow: hidden;
}
.all-your-content-div {
max-height: 100%;
overflow: auto;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
