小程序怎样去适配刘海屏？

Question

做H5开发需要去适配刘海，微信开发工具里试了一下没有出现底部遮挡问题，现在安卓也很多刘海屏，请问小程序是怎样去适配不同刘海屏的？

Answer 1

拿iPhone X举例，刘海（顶部导航条）不需要适配，小程序的导航条默认会进行适配，用户可通过传递page.json对navigationBar进行设置。
而对于下巴来讲，使用小程序的tab页面，默认会对其进行适配。除此之外的页面，如果有fixed定位于底部的元素，请通过wx.getSystemInfo获取设备信息，再通过systemInfo.model判断其设备，简单来说，如果判断其为iPhoneX，请动态设置元素高度，保证元素在iphoneX下能有理想的显示效果。

Answer 2

两种情况：
1、app.json中navigationStyle值为default，这种情况下会有一个微信默认的标题栏，适配工作微信自身会去做，开发者不用考虑
2、app.json中navigationStyle值为custom，这种情况下，是开发者自己来处理原来的标题栏部分。可以通过wx.getSystemInfo获取到statusBarHeight（状态栏的高度）来做实际的适配，一般这个状态栏的高度就包含了刘海的高度

相关的文档：
https://developers.weixin.qq....
https://developers.weixin.qq....

Answer 3

小程序不需要适配刘海屏幕，它是基于微信开发的，并不是APP