useScreenSafeArea ​
Reactive env(safe-area-inset-*)
Demo ​
top:
right:
bottom:
left:
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:
html
<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>
<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>
Then we could use useScreenSafeArea
in the component as shown below:
ts
import { useScreenSafeArea } from '@vueuse/core'
const {
top,
right,
bottom,
left,
} = useScreenSafeArea()
import { useScreenSafeArea } from '@vueuse/core'
const {
top,
right,
bottom,
left,
} = useScreenSafeArea()
For further details, you may refer to this documentation: Designing Websites for iPhone X
Component Usage ​
This function also provides a renderless component version via the
@vueuse/components
package. Learn more about the usage.
html
<UseScreenSafeArea top right bottom left>content</UseScreenSafeArea>
<UseScreenSafeArea top right bottom left>content</UseScreenSafeArea>