H5页面在iphone上的适配

最近在做app中的h5页面遇到了在iphone上导航栏遮住了顶部的电量状态栏，实际上是h5页面占满了手机的整个屏幕，但在安卓上显示正常。

先看app上的H5页面一般有两种分类：

• H5 页面使用原生 App 的 Navigation Bar 导航栏，此时，status bar 状态栏和导航栏都是原生控件，我们只需要专注的适配底部小黑条处的高度差异即可。
• H5 页面在 iOS 中占据全屏页面，在这种情况下，除了要兼顾底部小黑条，我们还要处理页面上部跟 状态栏接触的部分，避免内容出现在状态栏上。

safe-area

safe-area是苹果提出的，指的是一个可视窗口范围，处于安全区域的内容不受圆角、齐刘海、小黑条的影响

解决方法

• 在页面的meta中加上：viewport-fit: cover，将页面扩充到整个屏幕

<meta name