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. 算法竞赛模板 AC自动机

    AC自动机基本操作 (1) 在AC自动机中,我们首先将每一个模式串插入到Trie树中去,建立一棵Trie树,然后构建fail指针. (2) fail指针,是穿插在Trie树中各个结点之间的指针,顾名思 ...

  2. hbuilder模拟器端口

    模拟器 | 端口 夜神安卓模拟器夜神安卓模拟器     62001 逍遥安卓模拟器逍遥安卓模拟器     21503 BlueStacks(蓝叠安卓模拟器)BlueStacks(蓝叠安卓模拟器)    ...

  3. Ubuntu16.04+cuda9.0安装教程

    1.安装NVIDIA驱动 首先去官网(http://www.nvidia.cn/Download/index.aspx?lang=cn)查找适配自己电脑GPU的驱动,我的电脑驱动版本如下: 执行如下语 ...

  4. 关于PCB的Mark点

    关于PCB的Mark PCB板子做好后,需要贴装元器件,现在元器件的贴装都是通过机器来完成的(SMT).SMT中会用到mark点. 一.什么是Mark点 Mark点也叫基准点或者光学定位点,为贴装工艺 ...

  5. CF817E Choosing The Commander

    \(\mathtt{CF817E}\) \(\mathcal{Description}\) 有 \(q\) 个操作\((1 \leq q \leq 10^{5})\): 1.加入一个数 \(p_i(1 ...

  6. redis - 环境搭建(转)

      一:简介(来自百科) redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合)和zse ...

  7. react-router v3和v4区别

    1.默认路由 v3 <IndexRoute> v4 <Route exact> 2.授权路由 import Redirect from 'react-router-dom' & ...

  8. cartographer和ROS的坐标系关系

    参考定义见:backpack_3d.lua    Local map frame是一次slam过程中的原点.但是现在cartographer支持Incremental mapping.global m ...

  9. DLL中使用字符串时的注意事项。

    library dll1; uses SysUtils, Classes; {$R *.res} function TESTDLL:string;stdcall; begin Result:='tes ...

  10. Codeforces ~ 1009C ~ Annoying Present (贪心)

    题意 一个长度为n的数组(初始全为0),进行m次操作. 操作:给你x,d,你任意挑选一个 i (1~n),每个数字加上 x+|i-j|*d( j 表示对应数字的下标) 问m次操作后的最大算术平均值为多 ...