1---
2category: Browser
3---
4 
5# useScreenSafeArea
6 
7Reactive `env(safe-area-inset-*)`
8 
9![image](https://webkit.org/wp-content/uploads/safe-areas-1.png)
10 
11## Usage
12 
13In 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:
14 
15```html
16<meta name="viewport" content="initial-scale=1, viewport-fit=cover" />
17```
18 
19Then we could use `useScreenSafeArea` in the component as shown below:
20 
21```ts
22import { useScreenSafeArea } from '@vueuse/core'
23 
24const {
25  top,
26  right,
27  bottom,
28  left,
29} = useScreenSafeArea()
30```
31 
32For further details, you may refer to this documentation: [Designing Websites for iPhone X](https://webkit.org/blog/7929/designing-websites-for-iphone-x/)
33 
34## Component Usage
35 
36```vue
37<template>
38  <UseScreenSafeArea top right bottom left>
39    content
40  </UseScreenSafeArea>
41</template>
42```
43 
44## Type Declarations
45 
46```ts
47export interface UseScreenSafeAreaReturn {
48  top: ShallowRef<string>
49  right: ShallowRef<string>
50  bottom: ShallowRef<string>
51  left: ShallowRef<string>
52  update: () => void
53}
54/**
55 * Reactive `env(safe-area-inset-*)`
56 *
57 * @see https://vueuse.org/useScreenSafeArea
58 */
59export declare function useScreenSafeArea(): UseScreenSafeAreaReturn
60```
61