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

小木
  • 295

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

回复
阅读 12.4k
3 个回答
✓ 已被采纳

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

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

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏