javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度

看一张图了解浏览器窗口的基本信息

1
这张图比较形象的展示了一些基本的信息

显示器的屏幕信息

1
2
3
4
5
6
7
screeen.height:屏幕分辨率的高（定值）
screen.width:屏幕分辨率的宽（定值）
screen.availHeight:屏幕可用高度（屏幕分辨率的高度-上下侧任务栏的高度）
screen.availWidth:屏幕可用宽度（屏幕分辨率的宽度-左右侧任务栏的宽度）

如下图：
2

浏览器窗口信息

1
2
3
4
5
6
7
window.outerHeight:浏览器高度
window.innerHeight:浏览器可用高度
工具栏高度=window.outerHeight-window.innerHeight;
另外还有window.outerWidth、window.innerWidth

如下图
3

页面信息

1
2
3
4
5
6
7
8
9
10
11
document.body.offsetHeight: body的总高度
document.body.offsetWidth: body的总宽度
document.body.clientHeight: body向用户展示的高度
document.body.clientWidth: body向用户展示的宽度
document.documentElement.scrollHeight：在不使用滚动条的情况下适合视口中的所有内容所需的最小宽度。
测量方式与 clientHeight相同：它包含元素的内边距，但不包括边框，外边距或垂直滚动条。
documwnt.body.scrollHeight=document.body.clientHeight

offsetWidth和clientWidth会随着浏览器窗口的大小变化而发生改变，而offsetHeight和clientHeight就不会发生变化，可以理解为一个定值

如下图
4

参考链接

https://blog.csdn.net/qq_15626693/article/details/54618276?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase

https://blog.csdn.net/qq_34543252/article/details/90400751

赏

谢谢你请我吃糖果

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

大家好<br><br>我叫村长<br>村长是我的笔名，真名叫王旭晖，90后。这里是个人记录生活状态，技术学习，工作总结的博客。专注于机器学习，中间件，服务端开发。对于未来希望能在短期内达到自己的所希望的生活状态和技术目标！！！<br>附上自己喜欢的一句话：永远年轻，永远热泪盈眶。