h5 app的全屏和沉浸式状态栏是不一样的

全屏模式

常见使用场景:如果页面是全屏游戏,一般会直接让状态栏消失,也就是页面全屏。webview高度全屏了,状态栏没有了。
写法:

终端支持:
没有终端类型限制
高度处理:与状态栏透明相同,webview高度=屏幕高度,状态栏高度为0且不显示前景内容。需要注意dom里fix元素的调整。

使用方法

勾选全屏模式即可,也可以直接才配置文件manifest.json文件中添加的根节点下添加字段 "fullscreen":true 根节点应该理解吧

{
...,
//这就是根节点
 "fullscreen":true
}

注意,如果是刘海屏的屏幕,他的状态栏区域仍会存在,现在的手机大多数都是刘海屏,所以这种方式就不能满足需求了

沉浸式状态栏

状态栏透明(沉浸式)

常见使用场景:如果页面顶部是图片,一般会把状态栏变成透明,此时同时会处理成滚动后恢复为纯色title,比如流应用中的36kr:

 
 
这个需要改三个地方
 
第一 取消全屏模式 全屏模式的配置会重置沉浸式状态栏的配置
第二 在以下三个地方添加 三个字段 然后保存 就ok了

下一章 我会讲讲全屏模式下 隐藏底部导航菜单后出现的空白部分的剞劂方案

 

h5 app 设置全屏的更多相关文章

  1. Android中两种设置全屏的方法

    设置全屏的两种方法: 第一种:在配置文件里面配置: <?xml version="1.0" encoding="utf-8"?><manife ...

  2. Android中两种设置全屏或者无标题的方法

    在开发中我们经常需要把我们的应用设置为全屏或者不想要title, 这里是有两种方法的,一种是在代码中设置,另一种方法是在配置文件里改: 一.在代码中设置: package jason.tutor; i ...

  3. android ActionBarActivity设置全屏无标题

    新建的Activity继承自ActionBarActivity,设置全屏无标题本来很简单的事,但是没想到app竟然无缘无故的挂,要么就是白屏一片,要么就是黑屏.坑了我一个多小时!!! 原因是Actio ...

  4. ActionBarActivity设置全屏无标题

    新建的Activity继承自ActionBarActivity,设置全屏无标题本来非常easy的事,可是没想到app居然无缘无故的挂,要么就是白屏一片,要么就是黑屏.坑了我一个多小时.!! 原因是Ac ...

  5. Android中设置全屏的方法

    在实际的应用程序开发中,我们有时需要把 Activity 设置成全屏显示,一般情况下,可以通过两种方式来设置全屏显示效果.其一,通过在代码中可以设置,其二,通过manifest配置文件来设置全屏. 其 ...

  6. Flash设置全屏后,放到网页中显示不正常

    stage.displayState = StageDisplayState.FULL_SCREEN;//全屏,注意当设置全屏后,放到网页中显示不正常

  7. Cordova 设置全屏及退出全屏切换

    设置全屏在super.init();之前 最后才退出全屏. 以下为具体代码: package com.agile.ittm; import android.os.Bundle; import andr ...

  8. Android(java)学习笔记242:多媒体之设置全屏的方法

    在实际的应用程序开发中,我们有时需要把 Activity 设置成全屏显示,一般情况下,可以通过两种方式来设置全屏显示效果.其一,通过在代码中可以设置,其二,通过manifest配置文件来设置全屏. 其 ...

  9. Activity设置全屏显示的两种方式及系统自带theme属性解析

    转载说明:原贴地址:http://blog.csdn.net/a_running_wolf/article/details/50480386 设置Activity隐藏标题栏.设置Activity全屏显 ...

随机推荐

  1. Vue开发环境安装并集成element-ui示例

    此文为转载,原文链接:https://blog.csdn.net/weixin_44670973/article/details/88871106 在此对原文中部分内容进行补充. 补充:element ...

  2. 解决code first Migration 增加外键时出现错误的问题

    先上模型 Comment public class Comment { [Key] public int CommentId { get; set; } [Required] public int S ...

  3. python自动化测试-使用第三方python库技术实现

    转载自https://www.cnblogs.com/beer/p/5418471.html

  4. Linux常用命令入门

    在Linux早期的版本中,由于不支持图形化操作,用户基本上都是使用命令行方式来对系统进行操作.掌握常用 的一些Linux命令是非常有必要的,下面将分类进行介绍.由于篇幅有限,在这里我们介绍命令时有些不 ...

  5. php-验证码类-PDO类-缩略图类

    Verify.class.php 验证码类 <?php class Verify{ const VERIFY_TYPE_NUM=1; const VERIFY_TYPE_EN=2; const ...

  6. px4_impl_posix_cmake学习

    ############################################################################ # # Copyright (c) PX4 D ...

  7. RRT路径规划算法(matlab实现)

    基于快速扩展随机树(RRT / rapidly exploring random tree)的路径规划算法,通过对状态空间中的采样点进行碰撞检测,避免了对空间的建模,能够有效地解决高维空间和复杂约束的 ...

  8. LUOGU P5061 秘密任务(背包+二分图染色)

    传送门 解题思路 \(orz\)出题人的神仙做法.本蒟蒻看不懂,就水个求补图再二分图染色的方法来\(%1%\)出题人. 首先我们对图中\(m\)个关系连边,发现这样是没法做的,因为我们最后要关注的是谁 ...

  9. docker安装(4)

    centos6 docker安装 wget -P /etc/yum.repos.d/ http://mirrors.aliyun.com/repo/epel-6.repo yum install -y ...

  10. [Catalan数三连]网格&有趣的数列&树屋阶梯

    如何让孩子爱上打表 Catalan数 Catalan数是组合数学中一个常出现在各种计数问题中的数列. 以比利时的数学家欧仁·查理·卡塔兰 (1814–1894)的名字来命名. 先丢个公式(设第n项为$ ...