iPhone的刘海屏和home键解决方案

问题

在开发APP的过程中，我们会遇到不同设备展示出来的各种问题，下面是作者遇到的问题：

1.APP放大缩小

问题描述：双指操作时可以将app像浏览器一样放大缩小

请看代码

<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0，minimum-scale=1.0, width=device-width, height=device-height, viewport-fit=cover">

解释说明：
viewport：意思为显示的窗口
user-scalable：是否允许用户进行缩放操作，值为yes（允许），no（不允许）
initial-scale：初始的缩放比列，一般值为1.0即默认比例
maximum-scale：允许缩放的最大比例
minimum-scale： 允许缩小的最大比例
width=device-width：显示的屏幕宽度等于设备的屏幕宽度
height=device-height：显示的屏幕高度等于设备的屏幕高度
viewport-fit： 请移步这里

解决方法：我们可以根据需求引入上面的代码。

代码在index.html的头部

2.刘海屏问题

问题描述：手机电池栏（状态栏透明）的问题

在苹果的“Human Interface Guidelines”中明确禁止了这种做法。
苹果规定：注意内容不要被裁切，建议内容为居中对称已不被圆角或传感器等遮挡，也建议使用系统提供的的元素以及自动布局来构建页面获得更好的适配效果。

既然苹果明确规定了这一项，那我们如何做到我们的状态栏“不透明”呢？
解决方法：我们在页面的顶部设置一个div并赋予样式

<div class="head-bar"></div>
<style lang="scss">
.head-bar{
	width:100%;
	height:1px;/*这里设置为1px*/
	position:fixed;
	background-color:white;/*这里设置你想要的状态栏颜色*/
	/*重点来了*/
	padding-top: constant(safe-area-inset-top); /*为导航栏+状态栏的高度 88px*/
  	padding-top: env(safe-area-inset-top); /*为导航栏+状态栏的高度 88px*/
}
</style>

具体效果可以看QQ的APP，在消息页

当然 你想透明并且让你的应用初始头部不从透明栏开始只需要在body标签全局引入这两行代码即可

	padding-top: constant(safe-area-inset-top); /*为导航栏+状态栏的高度 88px*/
  	padding-top: env(safe-area-inset-top); /*为导航栏+状态栏的高度 88px*/

注意

注意事项，这里我们需要注意的是position为fixed和absolute的元素，是已经脱离了文档流的。还有我们要引入问题一的配置viewport-fit=cover

3.iPhone 11后底部home遮挡问题

问题描述：底部有一个tablebar时会被home遮挡，这样的用户体验也不是很好

解决方案：

方法一：

类似于问题二的解决办法，这里就不做过多说明了。

方法二：

解决方法还是和方法一相似，不过这里是一种新的思路：
当我们底部为fixed时，我们可以将底部fixed元素的高度设置为：

height:calc(70px+constant(safe-area-inset-bottom));
height:calc(70px+env(safe-area-inset-bottom))

方法三：

解决思路：如果我们可以识别出手机的型号那我们是不是就可以解决这个问题了。

cordova的device给我们提供了一种识别手机型号的功能，我们可以通过device.model来识别型号，最后通过JavaScript对dom进行操作实现
这里就不举具体例子了，另外关于Android的开发的相关问题，这里推荐一篇文章