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. 9、springcloud整合logback打印sql语句

    Logback是由log4j创始人设计的又一个开源日志组件.logback当前分成三个模块:logback-core.logback- classic和logback-access.logback-c ...

  2. LeetCode Array Easy169. Majority Element

    Description Given an array of size n, find the majority element. The majority element is the element ...

  3. texi2dvi - 打印 Texinfo 文档

    SYNOPSIS 总览 texi2dvi [OPTION]... FILE... DESCRIPTION 描述 依次从 Tex 系统中运行每个 Texinfo 或者 LaTex 文件 FILE,直到解 ...

  4. Python3-unittest测试框架之Mock接口联调

    unittest测试框架之Mock接口联调 unittest.mock 是一个用于测试的Python库.它允许使用mock对象替换受测试系统的部分,并对它们如何已经被使用进行断言. Mock使用前提 ...

  5. kNN算法和决策树

    的整数. 下面看书上给出的实例: from numpy import * import operator def createdataset(): group=array([[1.0,1.1],[1. ...

  6. Java中static关键字的定义

    1.static存在的主要意义 static的主要意义是在于创建独立于具体对象的域变量或者方法.以致于即使没有创建对象,也能使用属性和调用方法! static关键字还有一个比较关键的作用就是 用来形成 ...

  7. sql update语句

    如果要更新数据库表中的记录,我们就必须使用UPDATE语句. UPDATE语句的基本语法是: UPDATE <表名> SET 字段1=值1, 字段2=值2, ... WHERE ...; ...

  8. Android中自己定义一个shade.xml

    自己定义一个shade: <shape> <!-- 实心 --> <solid android:color="#ff9d77"/> <!- ...

  9. git stash 保存和恢复进度

    1. stash当前修改 git stash会把所有未提交的修改(包括暂存的和非暂存的)都保存起来,用于后续恢复当前工作目录. 比如下面的中间状态,通过git stash命令推送一个新的储藏,当前的工 ...

  10. SP8222 NSUBSTR - Substrings(后缀自动机+dp)

    传送门 解题思路 首先建出\(sam\),然后把\(siz\)集合通过拓扑排序算出来.对于每个点只更新它的\(maxlen\),然后再从大到小\(dp\)一次就行了.因为\(f[maxlen-1]&g ...