Adapting Web Pages for iPhone X Safe Area and Bottom Home Indicator

iPhone X removed physical buttons and introduced a bottom home indicator, which creates layout challenges for web pages, especially for elements positioned with position:fixed at the bottom of the viewport.

The concept of a "safe area" defines a region of the screen that is not obscured by the rounded corners, notch, or home indicator; all interactive content should be placed within this area.

iOS 11 added the viewport-fit descriptor to the viewport meta tag with three possible values: contain , cover , and auto . To make use of the safe‑area variables, the page must set viewport-fit=cover .

WebKit also introduced the CSS functions env() and the legacy constant() , which expose four variables: safe-area-inset-left , safe-area-inset-right , safe-area-inset-top , and safe-area-inset-bottom . For iPhone X adaptation the bottom inset is the most relevant.

Note that constant() was deprecated after iOS 11.2; therefore both constant() and env() should be included, with constant() first to provide fallback for older versions.

Step 1: Set the viewport layout mode <meta name="viewport" content="width=device-width, viewport-fit=cover">

Step 2: Constrain the page content to the safe area body { padding-bottom: constant(safe-area-inset-bottom); /* iOS < 11.2 */ padding-bottom: env(safe-area-inset-bottom); /* iOS >= 11.2 */ }

Step 3: Adapt fixed elements

Type 1 – fully‑bottomed elements (bottom = 0). You can extend the height with padding or use calc() to add the inset:

{
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}

Or:

{
height: calc(60px + constant(safe-area-inset-bottom));
height: calc(60px + env(safe-area-inset-bottom));
}

Type 2 – non‑zero bottom elements (e.g., back‑to‑top buttons, side ads). Adjust with margin or calc() :

{
margin-bottom: constant(safe-area-inset-bottom);
margin-bottom: env(safe-area-inset-bottom);
}

Or:

{
bottom: calc(50px + constant(safe-area-inset-bottom));
bottom: calc(50px + env(safe-area-inset-bottom));
}

To isolate these styles for iPhone X only, wrap them in an @supports rule:

@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
.fixed-element {
margin-bottom: constant(safe-area-inset-bottom);
margin-bottom: env(safe-area-inset-bottom);
}
}

These techniques, while requiring careful testing, allow developers to ensure that fixed navigation bars, footers, and other bottom‑anchored UI components remain fully visible and usable on iPhone X and later devices with similar home‑indicator designs.

In practice, the exact implementation should be adjusted to the specific page layout and user‑experience requirements, but the combination of viewport-fit=cover , safe‑area variables, and conditional CSS provides a reliable solution.