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

分类：HTML5+

系统状态栏高度沉浸式状态栏刘海屏

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

2018-08-13 15:46 负责人:无分享

4 个回复

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

uniapp呢？

倒影 - 记忆的时间差.

uniapp呢？

stoneiniqiu

怎么知道是刘海屏呢

1***@qq.com

if(plus.navigator.hasNotchInScreen()){

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

}else{

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

}

2021-05-13 16:44

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

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

4 个回复

公告

相关问题

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

与内容相关的链接

4 个回复

公告

相关问题