https://github.com/zhetengbiji/safeAreaInsets

Use javascript to get the safe area insets.
https://github.com/zhetengbiji/safeAreaInsets

Last synced: about 1 month ago
JSON representation

Use javascript to get the safe area insets.

• Host: GitHub
• URL: https://github.com/zhetengbiji/safeAreaInsets
• Owner: zhetengbiji
• Created: 2018-03-27T06:27:05.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2019-08-21T13:43:55.000Z (over 5 years ago)
• Last Synced: 2024-10-28T22:42:57.259Z (about 1 month ago)
• Language: TypeScript
• Homepage:
• Size: 10.7 KB
• Stars: 91
• Watchers: 3
• Forks: 11
• Open Issues: 4
• Metadata Files:
  • Readme: README-CH.md

Awesome Lists containing this project

• awesome-github-star - safeAreaInsets

README

        
# safeAreaInsets

使用javascript获取安全区信息.

## 先决条件

* WKWebview

* viewport-fit=cover

## 安装

### NPM

```shell

npm install safe-area-insets --save

```

### UMD

```http

https://unpkg.com/safe-area-insets/out/umd/index.min.js

```

## 使用

### 引用

```js

var safeAreaInsets = require('safe-area-insets')

```

### 安全区信息

```js

console.log('safeAreaInsets.support', safeAreaInsets.support)

console.log('safe-area-inset-top', safeAreaInsets.top)

console.log('safe-area-inset-left', safeAreaInsets.left)

console.log('safe-area-inset-right', safeAreaInsets.right)

console.log('safe-area-inset-bottom', safeAreaInsets.bottom)

```

### 监听安全区信息变化事件

```js

function callback(style){

    console.log(style)

}

// add

safeAreaInsets.onChange(callback)

// remove

safeAreaInsets.offChange(callback)

```

## 相关阅读

>[为iPhoneX设计网站](https://webkit.org/blog/7929/designing-websites-for-iphone-x/)