Screen Real Estate Checker

In short The viewport a web page actually receives is considerably smaller than the screen you bought. A 1080p display gives up space to the taskbar or dock, the browser's tab strip, the address bar, any bookmarks bar and sometimes an extension row — and on a phone the address bar changes size as you scroll, so the viewport height is not even constant. What is left is frequently 200 pixels shorter than the panel height, which is exactly the amount that decides whether your hero section and its call to action fit above the fold. Design against the VIEWPORT rather than the screen resolution, and against the smallest common one rather than your own. Your development machine is almost certainly not representative: a designer on a large monitor with a hidden dock has hundreds more vertical pixels than a user on a laptop with a taskbar and a bookmarks bar. The related trap on mobile is `100vh`, which on many browsers refers to the viewport with the address bar hidden, so a full-height section is taller than the visible area until you scroll. `100dvh` is the modern fix and behaves the way people expect `100vh` to.