H5页面在iphone上的适配_h5界面顶部覆盖手机顶部

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

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

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

safe-area

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

解决方法

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

<meta name="viewport" content="viewport-fit=cover">
1

• 然后在body上设置安全区域，适配顶部状态栏和底部黑线

body{
	env(safe-area-inset-top);
	env(safe-area-inset-bottom);
}
1
2
3
4

env函数是ios新增的特性，需要注意的是，只有在viewport-fit设置为cover时，env才生效。在ios11.2前使用constant函数，但之后，constant就被废弃不再使用了。