微信小程序、H5 （IOS 底部适配）safe-area-inset-bottom

微信小程序

因为现在的ios全面屏底部有小黑线，位于底部的元素会造成黑线的阻挡，可以使用

.model{
	padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
 	padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
}

获取高度时

.model{
	height: calc(100% -  constant(safe-area-inset-bottom));
	height: calc(100% -  env(safe-area-inset-bottom));
}

tips: 记得先使用constant 再使用 env 

在lang="stylus"中 前面需要加~

padding-bottom: ~"calc(0.24rem + constant(safe-area-inset-bottom))";

padding-bottom: ~"calc(0.24rem + env(safe-area-inset-bottom))";

H5上适配安全区域采用viewport+constant+env方案

需要将viewport设置为cover，env和constant才能生效。设置代码如下：

<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">

viewport-fit 默认有3个值：

contain：可视窗口完全包含网页内容
cover：网页内容完全覆盖可视窗口
auto：默认值，此值不影响初始布局视图端口，并且整个web页面都是可查看的

参考：小程序IOS安全区域优化：safe-area-inset-bottom_代码搬运媛的博客-CSDN博客