useScreenSafeArea

类别

Browser

导出体积

1.63 kB

上次更改

1 hour ago

响应式 env(safe-area-inset-*)

示例

源码 playground (beta)

top:

right:

bottom:

left:

用法

为了使页面完全呈现在屏幕中，首先必须在 viewport meta 标签中设置额外属性 viewport-fit=cover，viewport meta 标签可能如下所示：

html

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

然后我们可以在组件中使用 useScreenSafeArea 如下所示：

import { useScreenSafeArea
 } from '@vueuse/core'

const {
  top
,
  right
,
  bottom
,
  left
,
} = useScreenSafeArea
()

有关更多详细信息，请参阅此文档：Designing Websites for iPhone X

组件使用

vue

<template>
  <UseScreenSafeArea top
 right
 bottom
 left
>
    content
  </UseScreenSafeArea>
</template>

类型声明

/**
 * 响应式 `env(safe-area-inset-*)`
 *
 * @see https://vueuse.org/useScreenSafeArea
 */
export declare function useScreenSafeArea
(): {
  top
: ShallowRef
<string, string>
  right
: ShallowRef
<string, string>
  bottom
: ShallowRef
<string, string>
  left
: ShallowRef
<string, string>
  update
: () => void
}
export type UseScreenSafeAreaReturn
 = ReturnType
<typeof useScreenSafeArea
>