@bbtfe/safe-area

适配ios状态栏以及iphoneX安全区域距离文档

组件功能

概念定义:

苹果普通机：屏幕形状呈长方形的手机 （iphone 5 6 7 8系列）
苹果刘海儿机：屏幕形状不规则 （iphoneX）

背景

1.在苹果普通机中app通过webview全凭展示html页面时，
屏幕顶部会有20高度的状态栏与页面重叠。
2.在苹果刘海儿机中app通过webview全凭展示html页面时，
屏幕顶部和底部分别有44高度的刘海儿和34高度的home键与html重叠。
3.苹果公司从ios11系统开始提供了四个css变量用于表示安全区域的
上下左右距离safe-area-inset-top safe-area-inset-left 
safe-area-inset-right safe-area-inset-bottom 
并提供constant函数（将来会被废弃）env函数计算这四个距离。
参考https://webkit.org/blog/7929/designing-websites-for-iphone-x/

适用范围

苹果手机app中html页面竖屏模式

原理

1.在需要撑开重叠区域的html标签上面／下面添加一个div标签,
  并给这个标签一个属性bbt-safe-area,属性是top或者bottom。
2.组件自动判断平台类型（ios或者android）如果是ios手机则根据div标签
中bbt-safe-area属性值，为此div标签添加style属性如下：
  a. bbt-safe-area属性为top时div标签为：
  <div bbt-safe-area="top" style="height: 20px !important;height: constant(safe-area-inset-top) !important;height: env(safe-area-inset-top) !important;"></div>
  b. bbt-safe-area属性为bottom时div标签为：
  <div bbt-safe-area="bottom" style="height: constant(safe-area-inset-bottom) !important;height: env(safe-area-inset-bottom) !important;"></div>

API

1. load()

根据平台类型为具有bbt-safe-area属性的html标签添加style样式，使之撑开重叠区域

Install

npm i @bbtfe/safe-area

use

        <fieldset>
              <legend>安全区域-top</legend>
              <div  bbt-safe-area="top"></div>
              <p class="main">我是主体内容</p>
        </fieldset>
        <fieldset>
              <legend>安全区域-bottom</legend>
              <p class="main">我是主体内容</p>
              <div bbt-safe-area="bottom"></div>
        </fieldset>

import SafeArea from '@bbtfe/safe-area';
SafeArea.load();