1***@163.com
1***@163.com
  • 发布:2018-08-13 15:46
  • 更新:2020-04-12 00:23
  • 阅读:6264

页面通顶(沉浸式)的情况下如何避开带刘海的屏幕的刘海遮挡

分类:HTML5+

页面通顶的情况下,H5的导航条上面的标题或者搜索框被带刘海的屏幕的留海遮挡,原先可以直接写死pading-top 20px,目前出来了刘海屏该如何去兼容呢?求大神指教。

2018-08-13 15:46 负责人:无 分享
已邀请:
DCloud_App_Array

DCloud_App_Array

有两种方法可以获取系统状态栏高度:

  • UA中有保存
    字符串格式为"Html5Plus/1.0 (Immersed/18.0)",括号中的数字就是系统状态栏高度,可通过方式获取:
    var immersed = 0;  
    var ms=(/Html5Plus\/.+\s\(.*(Immersed\/(\d+\.?\d*).*)\)/gi).exec(navigator.userAgent);  
    if(ms&&ms.length>=3){  
    immersed=parseFloat(ms[2]);  
    }
  • 通过5+API获取
    API:plus.navigator.getStatusbarHeight
    参考5+规范http://www.html5plus.org/doc/zh_cn/navigator.html#plus.navigator.getStatusbarHeight
  • 1***@163.com (作者)

    好的,问题终于得到完美的解决了。

    2018-08-14 14:22

  • y***@vip.qq.com

    uniapp怎么处理

    2019-07-02 11:46

y***@vip.qq.com

y***@vip.qq.com

uniapp呢?

倒影

倒影 - 记忆的时间差.

uniapp呢?

stoneiniqiu

stoneiniqiu

怎么知道是刘海屏呢

  • 1***@qq.com

    if(plus.navigator.hasNotchInScreen()){

    console.log('此设备是刘海屏');

    }else{

    console.log('此设备不是刘海屏');

    }

    2021-05-13 16:44

该问题目前已经被锁定, 无法添加新回复