首页
登录 | 注册

获取屏幕可视区域的宽度和高度

window.outerWidth与window.outerHeight:获得的是加上工具条与滚动条窗口的宽度与高度。
window.innerWidth与window.innerHeight:获得的是可视区域的宽高,但是宽度包含了纵向滚动条的宽度。
document.documentElement.clientWidth与document.documentElement.clientHeight:获得的是屏幕可视区域的宽高,不包括滚动条与工具条,跟jquery的与(window).width()与(window).height()获得的结果是一样的。
document.body.clientWidth与document.body.clientHeight:document.body.clientWidth获得的也是可视区域的宽度,但是document.body.clientHeight获得的是body内容的高度,如果内容只有200px,那么这个高度也是200px,如果想通过它得到屏幕可视区域的宽高,需要样式设置,如下:

body {
height: 100%;
overflow: hidden;
}
body, div, p, ul {
margin: 0;
padding: 0;
}

最关键的是:body的height:100%影响document.body.clientHeight的值。

body的margin:0,padding:0影响document.body.clientWidth的值。

兼容性:

1.window innerWidth 和 innerHeight 属性与outerWidth和outerHeight属性IE8以及以下不支持。

2.测试浏览器IE,火狐,谷歌,360浏览器,Safari都支持document.documentElement.clientWidth与document.documentElement.clientHeight。

结论:

获取屏幕的可视区域的宽高可使用jquery的方式获得,也可以使用原生js获得,即:

document.documentElement.clientWidth与document.documentElement.clientHeight


相关文章

  • 电厂锅炉,火电厂三大主力设备之一.在电厂生产过程中发挥了极其重要的作用,是火电厂生产所必不可少的重要设备.但是,近些年,因为锅炉安全管控不到位而造成的事故屡有发生,给电厂的财产及人员的生命造成极大威胁.分析电厂锅炉的泄漏原因,制定有针对性的 ...
  • 云原生时代来袭 下一代云数据库技术将走向何方?
    全面云化的时代已经到来,面对一系列的新技术和挑战,数据库市场将面临怎样的变革?作为云服务提供商,如何帮助更多的企业级用户把握"云"潮,提供最高效.最具价值的数据库解决方案? 日前,在阿里云峰会·北京站的数据库专场上,阿里 ...
  • 现代IM系统中的消息系统架构 - 架构篇
    前言 IM全称是『Instant Messaging』,中文名是即时通讯.在这个高度信息化的移动互联网时代,生活中IM类产品已经成为必备品,比较有名的如钉钉.微信.QQ等以IM为核心功能的产品.当然目前微信已经成长为一个生态型产品,但其核心 ...
  • 选择scrum任务看板管理工具的要点
    现在市面上的任务管理工具太多了,不可能一个一个的试用,简单的说几个必备特性,或者可以帮助缩小范围. 目标: 在尽量简单.简洁的情况之下提高我们团队的工作效率. 选择一个合适的工具并匹配我们的工作模式会事半功倍,就是提高效率,降低成本,而非增 ...
  • 【前端安全】传输安全
    传输安全 HTTP传输窃听: 过程: 浏览器<->代理服务器<->链路<->服务器 在代理服务器和链路这过程中,可能会造成传输链路窃听篡改.因为HTTP是明文传输的,不会加密. 可以通过 tracert ...
  • CODING 研发管理系统上线全球加速,助力企业跨区域协作
    CODING 研发管理系统现已全面支持全类型代码仓库的 全球加速访问. 随着国内互联网红利的日趋枯竭与全球互联网的加速普及.越来越多的企业开始走出国门,将目光投向全世界,搭建跨国体系.跨出国门的中国企业在选择服务时,首要考虑国内的速度和可靠 ...

2020 jeepshoe.net webmaster#jeepshoe.net
13 q. 0.311 s.
京ICP备10005923号