hbuilder（mui） 设置沉浸式状态栏后顶部有灰条的问题解决

最新推荐文章于 2023-03-07 10:59:48 发布
最新推荐文章于 2023-03-07 10:59:48 发布
阅读量1.7k 收藏 2
点赞数 4
CC 4.0 BY-SA版权
分类专栏： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_39581226/article/details/91045769
本文详细解析了iOS11以上系统中启用沉浸式状态栏后，webview如何自动调整至安全区域内，以及如何通过修改meta标签的viewport-fit属性来禁用此功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

"plus": {  
    "statusbar": {  
        "immersed": true  
    }  
}

敲黑板

 iOS11以上系统当启用沉浸式式状态栏后，webview默认会调整内容至安全区域之内，视觉效果如下图:
  如果不需要自动调整可以在meta(name="viewport")节点的 content属性值中添加viewport-fit=cover

app沉浸式导航栏相关处理（适用于Hbuilder打包项目）
weixin_44283145的博客
12-15 1488
在移动端，很多的app都需要设置沉浸式导航栏，但是手机适配又成了一个很大的问题。所以通过获取手机状态栏高度，再增加页面padding的方法应该是最好的，可以适应各种妖孽手机。首先需要在HBuilder的配置文件中设置沉浸式导航，找到manifest.json件下的plus对象，然后贴如下面代码： "statusbar": { "immersed": true/*沉浸式状态栏*/ }, 下面代码片段是获取移动端状态栏高度的。 注：此代码写在main.js中 //由于plus模块需要加载，所以这
mui 沉浸式状态栏
qq_38026437的博客
05-13 829
只需要放到全局js里面 就可以实现 沉浸式状态栏布局 mui.plusReady(function() { //判断是否支持沉浸式 var isImmersedStatusbar = plus.navigator.isImmersedStatusbar(); if(isImmersedStatusbar){ //获取状态栏高度 var StatusbarHeight =...
HBuilder浏览器运行“灰色”
lth9822的博客
07-13 5631
点击“运行”--“运行配置”，左侧选择需要的浏览器，右侧“+”号后面配置路径，即使没问题也重新配置一下浏览器路径，应用--保存=OK！
《H5 App开发》HBuilder打包成app 状态栏的颜色问题
qq_42660374的博客
03-07 570
《H5 App开发》HBuilder打包成app 状态栏的颜色问题
vue打Hbuilder打包app，设置沉浸式状态栏
qq_23260639的博客
03-15 8084
在mainfest.json的plus中以下位置添加statusbar内容"plus": { "statusbar":{ "immersed": true/*沉浸式状态栏*/ }, "splashscreen": { "autoclose": true,/*是否自动关闭程序启动界面，true表示应用加载应用入口页面后自动关闭；...
MUI-设置沉浸式状态栏后MUI导航栏的高度问题
qq_42709302的博客
04-30 1006
问题描述与分析 设置了沉浸式状态栏之后，使用mui.openWindow()跳转时隐藏原生导航栏，在目标页面中加入MUI的导航栏，目标页面代码和界面效果如下： <!doctype html> <html> <head> <meta charset="UTF-8"> <title></titl...
沉浸式状态栏Demo
03-03
自己写的一个沉浸式状态栏的demo AndroidStudio版的 代码很简单 eclipse可以直接复制代码看效果 如果有个别人出现顶部的TitleBar的话 请自行设置Activity的Theme为NoTitle PS:不要在Activity onCreate中设置
zhaomenghuan#mui-demo#3.沉浸式状态栏设置方法1
07-25
第一步：设置配置文件 第二步：使用5+API判断当前环境是否支持沉浸式状态栏获取状态栏高度 第三步：调整高度
Hbuilder MUI 页面刷新及页面传值问题
02-05
### HBuilder MUI 页面刷新及页面传值问题详解 #### 一、页面刷新问题 在HBuilder MUI框架中，实现页面之间的数据刷新是常见需求之一。以下将详细介绍如何通过MUI提供的API来完成这一功能。 ##### 1. 父页面A跳转...
Hbuilder MUI login APP
09-23
【Hbuilder MUI Login APP详解】 HBuilder是DCloud（数字天堂）推出的一款高效、智能的HTML5开发工具，它集成了多种前端框架和库，包括MUI。MUI是基于HTML5+标准构建的移动端UI框架，设计风格借鉴了阿里巴巴的扁平...
沉浸式状态栏”准确来说应该是“透明栏”
04-26
沉浸式状态栏”准确来说应该是“透明栏”，英文名“Translucent Bars”，是Android 4.4 新定义的设计规范。简单来说就是在软件打开的时候通知栏和软件顶部颜色融为一体，这样可以使软件和系统本身更加融为一体，同时通知栏的颜色不再是白色、黑色简单的两种了。
MUI-设置沉浸式状态栏
JunJiu0420的博客
10-24 1080
mui设置沉浸式状态栏
MUI——设置沉浸式状态栏
weixin_34321977的博客
11-08 966
沉浸式状态栏类型就是这样的HBuilder创建的应用默认不使用沉浸式状态栏样式，需要进行如下配置开启：打开应用的manifest.json文件，切换到代码视图，在plus -> statusbar 下添加immersed节点并设置值为true。"plus": { "statusbar": {/*设置沉浸式状态栏*/ "immersed": true }, "splashsc...
mui android 状态栏,MUI——设置沉浸式状态栏
weixin_29127757的博客
05-28 674
沉浸式状态栏类型就是这样的HBuilder创建的应用默认不使用沉浸式状态栏样式，需要进行如下配置开启：打开应用的manifest.json文件，切换到代码视图，在plus -> statusbar 下添加immersed节点并设置值为true。"plus": {"statusbar": {/*设置沉浸式状态栏*/"immersed": true},"splashscreen": {"auto...
android虚拟键盘顶部出现灰色高度,vue、H5解决安卓手机软键盘弹出,页面高度被顶起...
weixin_35040154的博客
05-26 508
已测试,可解决问题const originalHeight=document.documentElement.clientHeight ||document.body.clientHeight;window.onresize = ()=>{return(()=>{//键盘弹起与隐藏都会引起窗口的高度发生变化const resizeHeight=document.documentElem...
【学习笔记】HBuilder状态栏隐藏显示及颜色
热门推荐
个性小资的博客
01-06 2万+
最近在看HBuilder文档时针对顶部状态栏如何隐藏/显示及如何设定颜色有一些疑问，也看了不少人问得问题和解答，总结出来几个方法，和大家分享下默认的含mui的html文件都会包含<script type="text/javascript" charset="utf-8"> mui.init(); </script>设置系统状态栏背景颜色（iOS7及以上生效）mui.init()方法是用来初始
沉浸式，状态栏高度，刘海屏怎么开启，怎么适配？看这！
Yxc_Programmer的博客
09-23 1202
何为沉浸式？ 沉浸式就是app的头部和状态栏和何为一体的，webview即为整个手机的高度 何为状态栏？ 状态栏就是手机顶部，显示时间电量那一行 除此还有刘海屏，水滴屏，挖孔屏，全面屏，非刘海屏，不同手机状态栏高度又不太一样，需要我们去适配，有一个段子说，如果看到那个手机适配有问题，赶紧把那个手机藏起来，不要让测试发现了。 我们用HBuilder创建的应用默认是不开启沉浸式的，需要我们手...
uni-app导航栏和状态栏配置
daoxiaofei的博客
11-25 6112
参考：官网uni-app导航栏开发指南。 1.1 原生导航栏-通用配置 (1) 原生导航优点 原生导航的体验更好，渲染新页面时，原生导航栏的渲染无需等待新页面dom加载，可以在新页面进入动画开始时就渲染。 原生导航还可以避免滚动条通顶，并方便的控制原生下拉刷新。通过pages.json的配置，可以简单的、跨端的、高性能的开发业务。 (2) 原生导航缺点 原生导航栏的扩展能力有限的。尤其是微信下，没有提供太多导航栏的配置。 (3) 原生导航栏的通用配置： uni-app 自带原生导航栏，在page.
HBuilder设置APP状态栏
dashen0002的博客
04-25 1436
一、 前言 　　状态栏就是手机屏幕最顶部的区域，包括了：信号、运营商、电量等信息。通常APP都有属于自己的色调风格，为了达到整体视觉美观，通常会设置状态栏和标题栏的色调设置成一致。 　　图例： 　　 二、状态栏状态类型 默认 变色（设置颜色） 透明（沉浸式） 消失（全屏） 三、状态栏变色 　　1.效果如图： 　　2...
使用mui框架实现移动APP状态栏美化技巧
在本文中，作者分享了如何在mui框架下实现沉浸式状态栏、全屏状态栏以及自定义状态栏背景色。 1. 沉浸式状态栏：这种状态下，状态栏会变得透明，通常适用于整个页面为图片的情况，以增加视觉的整体性。通过检测`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值