第一句子网 - 唯美句子、句子迷、好句子大全
第一句子网 > 获取屏幕高度——浏览器高度 控制台高度 工具栏高度

获取屏幕高度——浏览器高度 控制台高度 工具栏高度

时间:2020-10-03 01:45:13

相关推荐

获取屏幕高度——浏览器高度 控制台高度 工具栏高度

今天想写一个效果,进入网站顶部导航栏需要一个全屏背景图,这个需要根据不同的屏幕大小适应不同的高度(不能使用height为100%,这个涉及到最外层容器的高度,容易造成高度塌陷),所以需要一个确定高度值。

一开始最快反应就是document.body.clientHeight

确实拿到了屏幕高度,可是出现了一个问题,就是你一旦打开控制台以后再刷新页面,当前获取的clientHeight高度就变成了剪掉控制台的高度了。

就像下面这样:

当你打开控制台后:

关闭控制台后:

这就是问题所在,于是我找了资料,就有了下面这张图:

各种属性都试了一遍,依然不行,后来想到,自动触发屏幕大小高度发生变化,自动重新获取屏幕高度。

监听屏幕大小变化:

window.onresize = function () {console.log('浏览器窗口的大小被改变了');}

于是再次打开控制台就可以自动重新渲染屏幕高度了。

工具栏高度:

let 工具栏高度 = window.outerHeight - window.innerHeight;

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。