收藏
回答

如何解决小程序刘海屏手机适配问题?

头部自定义的导航栏,使用后,,所有有刘海萍的手机下面多出这个一块区域,非刘海屏手机,没问题,请教如何解决这个问题呢?


回答关注问题邀请回答
收藏

5 个回答

  • 靠人品去赢
    靠人品去赢
    2020-03-18

    说一下我的什么问题和怎么解决的:

    问题:

    我也是采用的是自定义导航栏,遇到适配问题,就是系统返回的statusBarHeight可能有大有小(因为屏幕,挖空的,刘海的各有自己的机制),但是有的页面就会出现顶部用fixed的区域div位置是自己输入固定数值,会出现要不然被吃掉一部分,要不然是和导航栏有间隙。

    解决:

    其实就是顶部的top要设置到多大,首先我们可以获取statusBarHeight,自定义导航栏高度自己也知道,所以这块fixed区域的top:(statusBarHeight + 自定义导航栏高度)px

    这样看起来就不会出现不同手机适配的问题,问题的点就是确定statusBarHeight,并且根绝他来定位置。

    2020-03-18
    有用 1
    回复
  • 艺
    2021-04-02

    现在不仅x系列,苹果12等等机型都已经是刘海屏了


    2021-04-02
    有用
    回复
  • var 友原
    var 友原
    2019-08-12

    这是刘海屏手机自己适应的,为什么要去掉呢

    2019-08-12
    有用
    回复
  • 老张
    老张
    2019-08-12

    不管它是正解。

    2019-08-12
    有用
    回复
  • 思男
    思男
    2019-08-12

    自定义导航的刘海屏归为statusBarHeight里,

    根据你的需求自己调整即可,

    但是不推荐做调整,因为可能有些手机比较窄的异形屏调整后会挡住导航栏的内容。

    2019-08-12
    有用
    回复 3
    • @   @
      @ @
      2019-08-12
      相关操作上面我都做了,但是就是不行,也找不出问题在哪?第一次开发小程序,
      2019-08-12
      回复
    • 思男
      思男
      2019-08-12回复@ @
      先说一下你想要什么效果
      2019-08-12
      回复
    • 思男
      思男
      2019-08-12回复思男
      然后根据 https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html 提供一下可以复现的代码片段
      2019-08-12
      回复
登录 后发表内容
问题标签