How to Seamlessly Handle iPhone X Notch and Bottom Bar in Web Front‑End Design
This article explains why the traditional method of adding a bottom‑bar class fails on iPhone X‑style devices, and demonstrates a modern solution using viewport‑fit and safe‑area insets to keep content clear of the notch and bottom bar in both portrait and landscape orientations.
Previous Approach
Earlier we added a has-bottombar class to the <html> element and used CSS to reserve space for the bottom “hair” and a fixed ::after element, which only handled the bottom bar and ignored the notch.
<html class="has-bottombar">
<head></head>
<body></body>
</html>Corresponding CSS used a media query for iPhone X dimensions (375px × 812px) to set a 34px bottom padding and a fixed overlay.
@media only screen and (-webkit-device-pixel-ratio:3) and (device-height:812px) and (device-width:375px) {
.has-bottombar {
height: 100%;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding-bottom: 34px;
}
.has-bottombar::after {
content: '';
z-index: 9999;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 34px;
background: #fff;
}
}This solved the bottom‑bar issue but caused the notch to hide left‑side text in landscape mode, and each new iPhone size required additional media queries.
Correct Approach
Since iOS 11 we can use viewport-fit=cover together with the env() function (or the deprecated constant()) to obtain safe‑area insets.
Safe area represents the region excluding the notch and bottom bar.
Viewport‑fit values:
contain – viewport fully contains the page.
cover – page fully covers the viewport.
auto – same as contain.
We set the meta tag:
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">Then apply padding based on env(safe-area-inset-*) so the main content stays inside the safe area.
body {
padding-top: env(safe-area-inset-top);
padding-right: env(safe-area-inset-right);
padding-bottom: calc(env(safe-area-inset-bottom) + 50px);
padding-left: env(safe-area-inset-left);
}The calc() adds the height of a fixed bottom button (50 px) to the bottom inset, ensuring the button does not cover content.
Bottom Button Handling
Wrap the button in a container that uses the safe‑area inset for bottom padding and a fixed position.
.btn-container {
box-sizing: content-box;
height: 50px;
line-height: 50px;
background: #fff;
position: fixed;
bottom: 0;
left: 0;
right: 0;
text-align: center;
padding-bottom: env(safe-area-inset-bottom);
}Button style:
.btn {
width: 100%;
height: 50px;
line-height: 50px;
background: #00c340;
border: none;
}With these rules the page avoids both the notch and the bottom bar in portrait and landscape, works on iOS 11+ devices, and degrades gracefully on older browsers.
Conclusion
Using viewport-fit and env() provides a clean, future‑proof way to handle iPhone X‑style displays without endless media‑query hacks.
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
Tencent IMWeb Frontend Team
IMWeb Frontend Community gathering frontend development enthusiasts. Follow us for refined live courses by top experts, cutting‑edge technical posts, and to sharpen your frontend skills.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.