Use safe area with UnoCSS.

To ensure the correct functioning of env styles, make sure to include the viewport-fit=cover in viewport meta tag:

<meta
    name="viewport"
-   content="width=device-width, initial-scale=1.0"
+   content="width=device-width, initial-scale=1.0, viewport-fit=cover"
/>

npm install unocss @yeungkc/unocss-preset-safe-area

yarn add unocss @yeungkc/unocss-preset-safe-area

pnpm add unocss @yeungkc/unocss-preset-safe-area

import presetSafeArea from '@yeungkc/unocss-preset-safe-area'

export default defineConfig({
    ...
    presets: [...presetSafeArea()...]
    ...
})

This preset supports safe-area-inset-*, titlebar-area-* and keyboard-inset-*.

Basic usage:

• pt-safe-1 : padding-top:env(safe-area-inset-top, 0.25rem);
• for addition, use +, example: pt+safe-1 : padding-top:calc(env(safe-area-inset-top) + 0.25rem);.
• To specify env properties, like titlebar-x, keyboard-t, use w-titlebar-x-1:width:env(titlebar-area-x, 0.25rem);.

Currently supports p, m, w, h, max-w, min-w, max-h, min-h, left, top, right, bottom, where:

• safe represents safe-area-inset-
• titlebar represents titlebar-area-
• keyboard represents keyboard-inset-

For all usage examples, it's all Autocomplete:

(top|left|right|bottom)(+|-)(safe|keyboard)-<num>
(top|left|right|bottom)(+|-)safe-(r|l|t|b)-<num>
(top|left|right|bottom)(+|-)titlebar-(x|y|w|h)-<num>
(top|left|right|bottom)(+|-)keyboard-(r|l|t|b|w|h)-<num>
(w|h)(+|-)safe-(r|l|t|b)-<num>
(min|max)-(w|h)(+|-)safe-(r|l|t|b)-<num>
(w|h)(+|-)(titlebar|keyboard)-<num>
(w|h)(+|-)titlebar-(x|y|w|h)-<num>
(min|max)-(w|h)(+|-)(titlebar|keyboard)-<num>
(min|max)-(w|h)(+|-)titlebar-(x|y|w|h)-<num>
(w|h)(+|-)keyboard-(r|l|t|b|w|h)-<num>
(min|max)-(w|h)(+|-)keyboard-(r|l|t|b|w|h)-<num>
(m|p)(r|l|t|b)(+|-)(safe|keyboard)-<num>
(m|p)(r|l|t|b)(+|-)safe-(r|l|t|b)-<num>
(m|p)(r|l|t|b)(+|-)titlebar-(x|y|w|h)-<num>
(m|p)(r|l|t|b)(+|-)keyboard-(r|l|t|b|w|h)-<num>

If you need more clarification, you can refer to this CSS example.

MIT License © 2024-PRESENT YeungKC