h5 app 设置全屏
h5 app的全屏和沉浸式状态栏是不一样的
全屏模式
常见使用场景:如果页面是全屏游戏,一般会直接让状态栏消失,也就是页面全屏。webview高度全屏了,状态栏没有了。
写法:
终端支持:
没有终端类型限制
高度处理:与状态栏透明相同,webview高度=屏幕高度,状态栏高度为0且不显示前景内容。需要注意dom里fix元素的调整。
使用方法

勾选全屏模式即可,也可以直接才配置文件manifest.json文件中添加的根节点下添加字段 "fullscreen":true 根节点应该理解吧
{
...,
//这就是根节点
"fullscreen":true
}
注意,如果是刘海屏的屏幕,他的状态栏区域仍会存在,现在的手机大多数都是刘海屏,所以这种方式就不能满足需求了

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

下一章 我会讲讲全屏模式下 隐藏底部导航菜单后出现的空白部分的剞劂方案
h5 app 设置全屏的更多相关文章
- Android中两种设置全屏的方法
设置全屏的两种方法: 第一种:在配置文件里面配置: <?xml version="1.0" encoding="utf-8"?><manife ...
- Android中两种设置全屏或者无标题的方法
在开发中我们经常需要把我们的应用设置为全屏或者不想要title, 这里是有两种方法的,一种是在代码中设置,另一种方法是在配置文件里改: 一.在代码中设置: package jason.tutor; i ...
- android ActionBarActivity设置全屏无标题
新建的Activity继承自ActionBarActivity,设置全屏无标题本来很简单的事,但是没想到app竟然无缘无故的挂,要么就是白屏一片,要么就是黑屏.坑了我一个多小时!!! 原因是Actio ...
- ActionBarActivity设置全屏无标题
新建的Activity继承自ActionBarActivity,设置全屏无标题本来非常easy的事,可是没想到app居然无缘无故的挂,要么就是白屏一片,要么就是黑屏.坑了我一个多小时.!! 原因是Ac ...
- Android中设置全屏的方法
在实际的应用程序开发中,我们有时需要把 Activity 设置成全屏显示,一般情况下,可以通过两种方式来设置全屏显示效果.其一,通过在代码中可以设置,其二,通过manifest配置文件来设置全屏. 其 ...
- Flash设置全屏后,放到网页中显示不正常
stage.displayState = StageDisplayState.FULL_SCREEN;//全屏,注意当设置全屏后,放到网页中显示不正常
- Cordova 设置全屏及退出全屏切换
设置全屏在super.init();之前 最后才退出全屏. 以下为具体代码: package com.agile.ittm; import android.os.Bundle; import andr ...
- Android(java)学习笔记242:多媒体之设置全屏的方法
在实际的应用程序开发中,我们有时需要把 Activity 设置成全屏显示,一般情况下,可以通过两种方式来设置全屏显示效果.其一,通过在代码中可以设置,其二,通过manifest配置文件来设置全屏. 其 ...
- Activity设置全屏显示的两种方式及系统自带theme属性解析
转载说明:原贴地址:http://blog.csdn.net/a_running_wolf/article/details/50480386 设置Activity隐藏标题栏.设置Activity全屏显 ...
随机推荐
- Vue开发环境安装并集成element-ui示例
此文为转载,原文链接:https://blog.csdn.net/weixin_44670973/article/details/88871106 在此对原文中部分内容进行补充. 补充:element ...
- 解决code first Migration 增加外键时出现错误的问题
先上模型 Comment public class Comment { [Key] public int CommentId { get; set; } [Required] public int S ...
- python自动化测试-使用第三方python库技术实现
转载自https://www.cnblogs.com/beer/p/5418471.html
- Linux常用命令入门
在Linux早期的版本中,由于不支持图形化操作,用户基本上都是使用命令行方式来对系统进行操作.掌握常用 的一些Linux命令是非常有必要的,下面将分类进行介绍.由于篇幅有限,在这里我们介绍命令时有些不 ...
- php-验证码类-PDO类-缩略图类
Verify.class.php 验证码类 <?php class Verify{ const VERIFY_TYPE_NUM=1; const VERIFY_TYPE_EN=2; const ...
- px4_impl_posix_cmake学习
############################################################################ # # Copyright (c) PX4 D ...
- RRT路径规划算法(matlab实现)
基于快速扩展随机树(RRT / rapidly exploring random tree)的路径规划算法,通过对状态空间中的采样点进行碰撞检测,避免了对空间的建模,能够有效地解决高维空间和复杂约束的 ...
- LUOGU P5061 秘密任务(背包+二分图染色)
传送门 解题思路 \(orz\)出题人的神仙做法.本蒟蒻看不懂,就水个求补图再二分图染色的方法来\(%1%\)出题人. 首先我们对图中\(m\)个关系连边,发现这样是没法做的,因为我们最后要关注的是谁 ...
- docker安装(4)
centos6 docker安装 wget -P /etc/yum.repos.d/ http://mirrors.aliyun.com/repo/epel-6.repo yum install -y ...
- [Catalan数三连]网格&有趣的数列&树屋阶梯
如何让孩子爱上打表 Catalan数 Catalan数是组合数学中一个常出现在各种计数问题中的数列. 以比利时的数学家欧仁·查理·卡塔兰 (1814–1894)的名字来命名. 先丢个公式(设第n项为$ ...