safe areas

README.md

Usage

header {
  position: fixed;
  top: 0;
  left: 0;
  padding: 1em 1em 0; /* fallback when css-variables are not supported */
  padding-top: calc(var(--safe-area-inset-top) + 1em);
  padding-left: calc(var(--safe-area-inset-left) + 1em);
  padding-right: calc(var(--safe-area-inset-right) + 1em);
}

Important that you add the HTML in the head, else the variables won't active and the browser might shrink down the page to fit in the safe zones

metatag.html

<meta name="viewport" content="viewport-fit=cover" />

safe-area.css

:root {
    --safe-area-inset-top: 0;
    --safe-area-inset-right: 0;
    --safe-area-inset-bottom: 0;
    --safe-area-inset-left: 0;
}

@supports (padding-top: constant(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: constant(safe-area-inset-top);
        --safe-area-inset-right: constant(safe-area-inset-right);
        --safe-area-inset-bottom: constant(safe-area-inset-bottom);
        --safe-area-inset-left: constant(safe-area-inset-left);
    }
}

@supports (padding-top: env(safe-area-inset-top)) {
    :root {
        --safe-area-inset-top: env(safe-area-inset-top);
        --safe-area-inset-right: env(safe-area-inset-right);
        --safe-area-inset-bottom: env(safe-area-inset-bottom);
        --safe-area-inset-left: env(safe-area-inset-left);
    }
}