useScreenSafeArea

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

¥Reactive env(safe-area-inset-*)

示例

source

top:

right:

bottom:

left:

用法

¥Usage

为了使页面在屏幕上完全渲染，必须首先设置 viewport 元标记中的附加属性 viewport-fit=cover，视口元标记可能如下所示：

¥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" />

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

¥Then we could use useScreenSafeArea in the component as shown below:

import { useScreenSafeArea } from '@vueuse/core'

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

更详细的信息，你可以参考这个文档：为 iPhone X 设计网站

¥For further details, you may refer to this documentation: Designing Websites for iPhone X

组件用法

¥Component Usage

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

类型声明

/**
 * Reactive `env(safe-area-inset-*)`
 *
 * @see https://vueuse.org/useScreenSafeArea
 */
export declare function useScreenSafeArea(): {
  top: Ref<string>
  right: Ref<string>
  bottom: Ref<string>
  left: Ref<string>
  update: () => void
}

源代码

源代码 • 示例 • 文档

变更日志

No recent changes