iPhone X CSS

iphone-x.css

/* From https://medium.com/@draganeror/iphone-x-layout-features-with-css-environment-variables-d57423433dec */

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover" />

padding-top: env(safe-area-inset-top);



// This WILL NOT work.
.selector {
  height: calc(100% + (env(safe-area-inset-top) + env(safe-area-inset-bottom)));
}

// This WILL work.
.selector {
  --safe-area-inset-top: env(safe-area-inset-top);
  --safe-area-inset-bottom: env(safe-area-inset-bottom);

  height: calc(100% + (var(--safe-area-inset-top) + var(--safe-area-inset-bottom)));
}



// Older browsers (do now support CSS Environment variables).
.selector {
  height: 100%;
}

// Browsers which partially support CSS Environment variables (iOS 11.0-11.2).
@supports (padding-top: constant(safe-area-inset-top)) {
  .selector {
    --safe-area-inset-top: constant(safe-area-inset-top);
    height: calc(100% + var(--safe-area-inset-top));
  }
}

// Browsers which fully support CSS Environment variables (iOS 11.2+).
@supports (padding-top: env(safe-area-inset-top)) {
  .selector {
    --safe-area-inset-top: env(safe-area-inset-top);
    height: calc(100% + var(--safe-area-inset-top));
  }
}