今年开始各路刘海和全面屏手势的手机已经开始霸占市场，全面屏和刘海屏的适配也必须提上日程。
相信大家也一定会有第一次将未适配的小程序放到全面屏或刘海屏手机上的尴尬体验。
尤其是在导航栏设置为custom时，标题与胶囊对不齐简直逼死强迫症。。
微信官方也没有出一个官方的指导贴帮助开发者。
这里仅总结一下个人关于这个问题的一些处理方式，如有疏漏烦请指正补充。
适配的关键在两个位置即额头和下巴，头不用说自然是关于刘海的。
小程序的头的高度主要分为2个部分
1.statusBarHeight 该值可以在app onLaunch 调用wx.getSystemInfoSync() 获取到
a）刘海 高度44
b）无刘海 ios高度20 安卓各不相同
2.胶囊高度 即下图高度
在查阅社区问答后了解到小程序给到的策略是ios在模拟器下统一是44px，ios在真机下统一是40px（感谢指正@bug之所措 ），而安卓下统一是48px，因此我们又可以在wx.getSystemInfoSync() 中获取到系统之后得到胶囊高度。
总的导航栏高度即这两个高度之合。本人项目中是将导航做成组件并给到slot，方便各个页面配置。
开发者工具 1.02.1810190 及以上版本支持在 app.json 中声明 usingComponents 字段，在此处声明的自定义组件视为全局自定义组件，在小程序内的页面或自定义组件中可以直接使用而无需再声明。
目前小程序还支持在单个页面配置custom，也可以配合使用~
另一个需要关注的则是底部，参考的文章是 https://www.jianshu.com/p/a1e8c7cf8821
重点是在于在全面屏的手机的底部需要流出34px的空白给到全面屏返回手势操作，此外由于全面屏屏幕圆边还可能使一些按钮或功能无法正常使用。
那么首先如何判断是否是全面屏呢？个人的做法是判断屏幕高度是否大于750，iphone的plus系列高度在736，正好在这个范围之内，当然750不一定准确，如果出现疏漏烦请补充。
涉及到底部的主要是弹出的操作菜单、tabBar和底部定位的按钮等。这里做了一个简单的代码片段。
https://developers.weixin.qq.com/s/fnU0n8mv7o5M
希望能够帮助到大家，也欢迎交流~
关于楼主所提及的【2.胶囊高度 】，我有补充的，有需要的可以参考：
大家可以自己在不同的页面的onload中添加以下语句查看输出
const res = wx.getSystemInfoSync()console.log(res)以我的手机（华为P20p）举例：
1）在标准页面（未自定义导航栏、也没有tab组件）中获取的结果是：
screenHeight：747，
statusBarHeight：27，
windowHeight：672
2）在自定义导航栏（"navigationStyle": "custom"）的页面中获取的结果是：
screenHeight：747，
statusBarHeight：27，
windowHeight：747
2）在未自定义导航栏，有tab组件的页面中获取的结果是：
screenHeight：747，
statusBarHeight：27，
windowHeight：618
由此可以看出，如果你的小程序不是所有页面都自定义导航栏，那么在进入自定义导航栏的页面前，如果总是得先进入未自定义导航栏的页面。那么是可以很容易计算出【2.胶囊高度 】的高度的：
所以我的手机的【2.胶囊高度 】高度为 ： 747 - 27 - 672 = 48px （与楼主给出的结果其实是一致的，区别在于一个是变量，一个是常量）
另外tab组件的高度是：672 - 618 = 54px
老哥你留个微信二维码，我给您打赏！！！好用
这就不用了吧
我也在做这边的工作，先给楼主点个赞
你好，代码片段在ios真机胶囊高度有误，现已更正，麻烦配合修改，抱歉。
小编你好，我昨天看了你这篇文章之后马上去修改我了自定义导航，但是我发现44px在ios没有居中啊，我截个图给你看下
下面的比上面的要宽一点啊，是我姿势不对吗？？？？ORZ···
请问你这个是真机的截图么 还是小程序的模拟器？
真机的哦！苹果5s，苹果7，还有苹果X 我现在统一调成48px了！调成了48px就没毛病了，我也不知道怎么回事！！？？（尴尬.jpg）
刚拿xs测试了一下 40px是居中的， 看来这个44有点问题。
你好，感谢指正，这里确实是有错误，在模拟器上ios端的胶囊栏高度是44，真机是40，安卓无论在模拟器还是真机上都统一是48，代码片段我改一下
是40！我也改成40了。但是我昨天刚开始的时候改成48是真的居中了，我也不知道怎么回事，不管怎样，谢谢小编提醒，我现在已经改回40，安卓就48
底部按钮那个不是终极解决办法吧，还是要小程序能拿到iphone x xr机型才好
但是安卓现在全面屏返回手势也多，全部自己录入也不现实，这算是比较省力的一种
回报楼主一个
usingComponents
开发者工具 1.02.1810190 及以上版本支持 usingComponents 字段，在此处声明的自定义组件视为全局自定义组件，在小程序内的页面或自定义组件中可以直接使用而无需再声明。