非自定义导航栏高度怎么计算？
自定义导航栏高度由谁决定？
小程序自定义导航栏开发注意点与参考文档
一、默认导航栏高度怎么计算？（非custom情况下获取）
wx.getSystemInfo 和 wx.getSystemInfoSync 获取机器信息
screenHeight - windowHeight 计算标题栏高度
{'iPhone': 64,'iPhone X': 88,'android': 68}不完全统计（ip6 , ip5 , ip6p , ipx , 小米mix2 , 小米5等综合了开发工具提供的数据和真机数据）所得
二、自定义导航栏高度由谁决定？（自定义情况下，屏幕高度和窗口高度没有差别，所以要通过步骤1先获取数据，预定义到代码中）
开发时发现，自定义导航栏的实现需要 包含状态栏+胶囊 ：没有自定义导航栏的时候页面是全屏幕滚动会出现在状态栏的下一层
根据上一标题中步骤1的函数，可以获得状态栏高度 statusBarHeight
三、小程序自定义导航栏开发注意点与参考文档
微信官方设计指导中关于胶囊按钮的描述 由此得知胶囊宽度87pt=116px，设置之后，的确能产生较好的兼容性效果
注意某些方法、参数的兼容性，时刻关注官方更新信息
开一个项目采集设备的screenHeight,windowHeight,pixelRatio等信息到一个数据库中，或者微信可以提供这样一个数据库便于计算，亦或者微信优化自定义标题栏（譬如通知栏可以改变颜色但不要算在自定义范围内，给出胶囊宽高到通知栏距离到右侧屏幕边框距离等相关参数）
自定义 customNavBarHeight
let res = wx.getSystemInfoSync();
let customNavBarHeight = res.statusBarHeight + res.screenWidth * 88 / 750; // 记得转换
页面正文高度 pageContantHeight
let model = res.model;
let isPhomeX = model.indexOf('iPhone X') > -1 || model.indexOf('iPhoneX') > -1 || model.indexOf('iPhone11') > -1;
let pageContantHeight = (isPhomeX ? res.screentHeight : res.windowHeight) - customNavBarHeight;
目前用机型测试结果这就是最好的适配方式了
欢迎写文章分享给更多的人~
能具体说一下let customNavBarHeight = res.statusBarHeight + res.screenWidth * 88 / 750; // 记得转换 是需要怎么转换么？为什么是 res.screenWidth 来乘呢？ 为什么乘以88呢？又为什么除以750呢？
这个意图是按照 iPhone 的方式来适配，iPhone 的导航栏高度为 44px = 88rpx。如此计算后，导航栏的高度等于按比例缩放了。
此做法在 iPhone 下不会有问题，等效于设置高度为88rpx。但在安卓手机上可能会有胶囊错位的问题。
因为小程序规范是按照iphone 来做的，宽度是750rpx，按照这个标准来做啊
自定义导航栏 (完美适配所有手机) 点我直达
自定义导航栏 (完美适配所有手机) 点我
用的华为v20做的测试，型号"PCT-AL10"，system"Android 9"，
使用的statusBarHeight + titleBarHeight的方案，但是并不符合68-20=48的android，我用的84，反而接近iphoneX。
感觉android单独一个68不够普世啊，这是android版本的问题还是手机型号的问题啊，如果是手机型号的问题，还有哪些特殊情况大佬们能分享一下吗
还是用系统默认的吧，我觉得，没必要折腾
如果能自己决定的话系统默认肯定是目前最好的选择
自定义导航栏有个不好的地方是下拉刷新的时候是整个屏幕下拉（包括导航栏），而默认导航栏的话只是导航栏下面的内容区域下拉
这个对小米8不适用。
谢谢反馈，请问可以提供小米8的screenHeight 和windowHeight吗？
用这种方法遇到了刘海屏的安卓，跪了。。。
解决方案：
统计机器数据，添加到判断数据中
采用其他方案
是因为你这个方案中把android部分的statusBarHeight写死了，只区分了ios的刘海iPhoneX
安卓刘海屏众多，所以再写个Vivo X23，OPPO r17等等不现实
所以应该是是把整个导航栏高度定义成两个区域的和，statusBarHeight + titleBarHeight，这样就可以避免安卓包括iPhoneX的刘海问题
titleBarHeight依然要计算出来，也就是这方案里的64-20=44为ios的，68-20=48为android
我目前用的就是statusBarHeight + titleBarHeight
你好 看到了你的回复 这个方案写的时候刘海屏安卓机身边还不普遍 所以没能考虑到，感谢你提供的思路
请问titlebar只需要区分 ios 为 44，android 为 48 就可以了吗？安卓以及苹果各机型的titlebar的高度是一样的吗？
是的
楼上马仔说的是对的，按照你的这种写法，如果遇到刘海屏的安卓手机就 GG 了。
iPhone 的标题栏高度是 48，Android 的标题栏高度是 54。通过 getSystemInfo 获取 statusBarHeight ，再加上标题栏的高度，就是整个导航栏的高度。
代码如下：
wx.getSystemInfo({success: ({ statusBarHeight, system }) => {let titleBarHeight = 44if(system.indexOf('Android') !== -1) {titleBarHeight = 54}returntitleBarHeight + statusBarHeight}})我这种做法是要先算好标题栏高度后写入判断的，没有能力能统计到目前全部手机的标题栏高度，所以是“高适应性”的解决方案，不是完全适应；提供的是一种思路，多谢反馈，我这边会逐个完善的
标题栏的高度需要根据机型不同做定义吗？还是只需要根据系统（ios/android）区分？看楼上的说iphone标题栏是44，安卓是48，和你介绍的ios=48，android=54有点出入，是否是因为机型不同导致的？
官方 SystemInfo 都给 statusBar 高度了，就不能给个 titleBar 高度吗？真是贼烦
statusBarHeight: {default:function(){let sysInfo= wx.getSystemInfoSync()returnsysInfo.windowWidth< 768? sysInfo.statusBarHeight* 375/ sysInfo.windowWidth+'px':'auto'}()}