H5浏览器沉浸式导航

学习安卓时候，了解沉浸式状态栏，也就是状态栏悬浮在app上面，不占用app的空间，这会导致app的内容会被遮盖。

没想到手机浏览器上面也会出现类似的情况。

安卓手机上面目前还没有发现，目前发现的是iphone6plus ios12上面。

这里主要对js的几个个api做比较：

window.innerWidth：窗口内部宽度
window.innerHeight：窗口内部高度
document.documentElement.clientWidth：文档可视区域宽度
document.documentElement.clientHeight：文档可视区域高度

如果只是简单看文档对这几个api的说明，其实真的有点难区分window.innerHeight和document.documentElement.clientHeight

一般情况下:

window.innerWidth和document.documentElement.clientWidth是等同的，拿到的值是一样的

window.innerHeight和document.documentElement.clientHeight同样等同

如果出现浏览器状态栏是悬浮的呢？

这个就出现异常了，它们拿到的值就不一样了。

window.innerHeight 是不包括悬浮导航的高度的，

但是document.documentElement.clientHeight是包含悬浮导航的高度的

还有window.addEventListener("resize”,()=>{}）,监听的是window.innerHeight的变化，

也就是说iphone上面上滑隐藏悬浮导航和下滑展示悬浮导航时候，会触发window的resize事件。

那得到上面的结论后，我们能干嘛呢？

判断是否是悬浮导航，window.innerHeight不等于document.documentElement.clientHeight时候就是悬浮导航
待挖掘…如发现，请在评论区回复我，O(∩_∩)O谢谢

移动端浏览器沉浸式导航相关推荐

微信小程序之沉浸式导航
首先看效果欢迎大佬前来点评第一步:在当前 .json( 点json) 文件中粘贴 "navigationStyle": "custom" {" ...
关于android 栏沉浸式导航的一些事儿
背景前两天看微信更新后,我自认为微信的沉浸式导航栏挺好看的,小编就想,我也把这种样式运用到我的项目如何呢?下面就一起来探讨一下,微信导航栏大家都知道,就不上图了,直接上我自己完成的效果. 主题字体颜 ...
微信小程序——沉浸式导航栏实现（含iphoneX适配和组件封装）
文章目录前言正文 JSON navBar.js navBar.wxml navBar.wxss test1.wxml 展示效果总结前言微信小程序中导航栏一般来说是默认的展示标题等等,可以做的 ...
uniapp设置导航栏、沉浸式导航栏以及获取屏幕尺寸
页面上往往会有一些需要随着屏幕的大小变化而变化的样式,这时,我们就需要获取到屏幕的宽度和高度. 当然,一个H5页面或者微信小程序页面的导航栏会有多种形态,可以带有导航栏,也可以设置为沉浸式导航栏(即导 ...
uni-app实现小程序沉浸式导航栏/顶部组件占满导航栏
uni-app实现小程序沉浸式导航栏/顶部组件占满导航栏如果你只是想单纯的让屏幕最上方的那个组件(比如swiper)将通知栏(导航栏)填充满,那么你只需要在page.json文件中加入以下代码到你想 ...
微信小程序——沉浸式导航栏实现
微信小程序--沉浸式导航栏实现微信小程序中导航栏一般来说是默认的展示标题等等,可以做的样式改变仅仅能通过配置一些官方提供的属性来实现.除此之外小程序还提供了navigationStyle这个属性可以 ...
android 4.4 以上沉浸式状态栏和沉浸式导航栏管理，一句代码轻松实现
ImmersionBar 项目地址:gyf-dev/ImmersionBar 简介:android 4.4 以上沉浸式状态栏和沉浸式导航栏管理,一句代码轻松实现,以及对 bar 的其他设置,详见 R ...
Android使用沉浸式导航栏
Android开发中,往往会有一种需求,那就是沉浸式导航栏(什么是沉浸式导航栏,这里就不做展开,自行百度).那么,怎么做到沉浸式状态栏呢,咱们接着往下看... 首先,在activity中加入 @Ove ...
android沉浸式导航栏与键盘的冲突
最近项目搞了沉浸式导航栏,但是与软键盘弹出冲突,布局不往上面顶,折腾几番之后,网上找到个方法但是不兼容华为部分机型,于是做了修改,测试机型有限,我手头的机型是没有问题了,于是分享出来,直接用就行了. ...

移动端浏览器沉浸式导航