useScreenSafeArea

Reactive env(safe-area-inset-*)

Get the safe area of the screen.

Examples ​

Basic Usage ​

{
  "top": "0px",
  "right": "0px",
  "bottom": "0px",
  "left": "0px"
}

Usage ​

In order to make the page to be fully rendered in the screen, the additional attribute viewport-fit=cover within viewport meta tag must be set firstly, the viewport meta tag may look like this:

<meta name="viewport" content="initial-scale=1, viewport-fit=cover">
<meta name="viewport" content="initial-scale=1, viewport-fit=cover">

API ​

const safeArea = useScreenSafeArea()
const safeArea = useScreenSafeArea()

Result ​

Area ​