image.png
产品提出来，iPhoneX按钮和底部需要留出一部分空白，而其他机型正常现实。
想法很简单，使用媒体查询 media query 按照 iphone x 的尺寸（375px * 812px）做处理即可。
但是这并不能解决xr xs xsmax 等分辨率不同的机型。
通过查阅资料，找到了一种解决方法
在 ios 11 中我们可以使用 viewport-fit=cover + safe-area-inset-*。
1、在template文件中添加viewport-fit=cover
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,viewport-fit=cover">
2、在需要的代码上添加constant(safe-area-inset-bottom)以及env(safe-area-inset-bottom)即可。
计算 底部非安全区域距离 与 底部按钮高度 之和 来做为 bottom 值
.btn {
bottom: calc(constant(safe-area-inset-bottom) + 68px);
bottom: calc(env(safe-area-inset-bottom) + 68px);
}
image.png
然后就达到预期结果了。
接着在安卓手机vivo x9、努比亚z20，魅族16P手机出现了确认信息被遮住的问题
image.png
应该是安卓不兼容constant(safe-area-inset-bottom)方法的原因，添加默认距离即可。
.btn {
bottom: 68px;
bottom: calc(constant(safe-area-inset-bottom) + 68px);
bottom: calc(env(safe-area-inset-bottom) + 68px);
}
以上即完美解决了iphonex底部添加安全距离的问题。
