【微信小程序】底部有安全距离，适配iphone X等机型的解决方案_微信小程序苹果的安全距离

微信小程序开发常常需要适配机型问题，如iPhone X/XR等机型，底部有黑色横杠（称为安全距离），这时如果直接加css样式fixed是不行的，不会计算底部安全距离，而会与之重叠。

// fixed
.box {
	position: fixed;
	bottom: 0;
}
1
2
3
4
5

经过搜索后，我们知道env(safe-area-inset-bottom)能计算出安全距离，我想到一个通用的写法，具体做法是将页面高度page的高度限制为屏幕高度减去安全距离，代码实现是calc(100vh- env(safe-area-inset-bottom))

完整代码如下：

<scroll-view class="container" scoll-y="{{true}}">
	//正常html代码
</scroll-view>
1
2
3

page {
	height: calc(100vh- env(safe-area-inset-bottom));
	overflow: hidden;
}

//要给高度，不然scroll-view无法垂直方向滑动
.container {
	height: 100%;
}
1
2
3
4
5
6
7
8
9