Frontend Development 10 min read

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.

Tencent IMWeb Frontend Team

Nov 14, 2018

How to Seamlessly Handle iPhone X Notch and Bottom Bar in Web Front‑End Design

Previous Approach

Earlier we added a

has-bottombar

class to the

&lt;html&gt;

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.

<code>&lt;html class="has-bottombar"&gt;
  &lt;head&gt;&lt;/head&gt;
  &lt;body&gt;&lt;/body&gt;
&lt;/html&gt;</code>

Corresponding CSS used a media query for iPhone X dimensions (375px × 812px) to set a 34px bottom padding and a fixed overlay.

<code>@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;
  }
}</code>

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:

<code>&lt;meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover"&gt;</code>

Then apply padding based on

env(safe-area-inset-*)

so the main content stays inside the safe area.

<code>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);
}</code>

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.

<code>.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);
}</code>

Button style:

<code>.btn {
  width: 100%;
  height: 50px;
  line-height: 50px;
  background: #00c340;
  border: none;
}</code>

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.

frontend css responsive design iPhone X safe area notch

Written by

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.

0 followers

Reader feedback

How this landed with the community

Rate this article

Was this worth your time?

Discussion

0 Comments

Thoughtful readers leave field notes, pushback, and hard-won operational detail here.