Table of Contents
公司微信小程序改版，好不容易上线了，问题也来了。比如，有 iPhone 用户反映看不到页面底部内容。拿起公司的测试用苹果手机，打开页面，一切正常。一脸问号。
再想想，难道是 iPhone x 系列的问题？向产品求证，因为产品就用的 iPhone x，并且之前产品也反映过另一个页面看不到底部内容。那个页面最初我以为是 vh 单位的兼容问题。尝试了百分比，无解，最后是增加了底部空白高度。
看到 iPhone x 上那个有问题的页面，心中默念“该死的苹果”，然后回到工位想解决方法。首先，排除 vh 单位和百分比的问题，因为之前试过。那就只能是 iPhone x 下面的虚拟操作栏（具体名称我不清楚，总之问题类似上面的刘海）的问题了。
百度了一下，说这是安全区适配问题。解决方案有三：
根据已知安全距离适配34px/68rpx(不建议)
小程序 app.js 文件中判断获取当前设备机型，如果是 iPhone x 系列机型，设置元素底部距离。
根据 wx.getSystemInfo 适配
通过 wx.getSystemInfo 这个 api 可以拿到 safeArea 对象和 screenHeight，两相比较，不等则为 iPhone x 系列。然后页面据此适配。
使用苹果官方推出的css函数env()、constant()来适配 （建议）
.el {
position: fixed;
bottom: 70px;
bottom: calc(70px + constant(safe-area-inset-bottom));
bottom: calc(70px + env(safe-area-inset-bottom));
}
这里需要按照顺序写才能适配 android、IOS < 11.2 (constant)、IOS > 11.2 (env)。
修改完毕，上传，看一下 iPhone x 上的页面，撒花。
真心感觉把时间花在各种机型的兼容适配上是浪费时间。