- window.innerWidth :浏览器docment宽度
- window.outerWidth :反之:整个浏览器的宽度
- window.innerHeight :浏览器docment宽度
- window.outerHeight :反之
- 兼容性:IE 8 及更早 IE 版本不支持该属性。一句话:webapp开发不用担心系统浏览器调用让这个元素不能用。如果是pc端 应该考虑一下了,为了弥补IE8不可用可以替换 document.documentElement.clientHeight, document.documentElement.clientWidth对比兼容性,一句话卧槽,俩个刚好互补。千万不要尝试去使用window.screen下的属性,如果面试你可以告诉他,这个元素也能获取宽高。
大家记住一点客户没人会去看控制台。
描述:不做任何操作下我们使用innerWidth以及outerWidth获取的宽度是一样的。按F12,这个时候innerWidth为docment宽度,outerWidth为浏览器宽度
- window.screen.height :屏幕物理分辨率的高
- window.screen.width :屏幕物理分辨率的宽
- window.screen.availHeight :屏幕可用工作区高度
- window.screen.availWidth :屏幕可用工作区宽度
兼容性:IE 10 及更早 IE 版本不支持该属性且其他浏览器也兼容的不好,一句话少用。- window.devicePixelRatio屏幕缩放因子: window.screen.width * window.devicePixelRatio (缩放因子与物理分辨率的乘积)屏幕逻辑分辨率:
兼容性:IE 8 及更早 IE 版本不支持该属性且其他浏览器版本太低,一句话多用。
描述:少用
- document.body.clientWidth :浏览器body宽度(包括如果body有边线则不包括边线宽)
- document.body.clientHeight :浏览器body高度(包括如果body有边线则不包括边线宽)
document.documentElement.clientHeight :第三种方式获取的是可视区的高
document.documentElement.clientWidth:第三种方式获取的是可视区的宽
兼容性非常好,不用考虑 安卓浏览器2.1 - 4.4.4 /苹果浏览器3.1 - 5.1/Chrome 4 - 42- document.body.offsetWidth :浏览器docment宽度(包括如果body有边线则包括边线宽)
- document.body.offsetHeight :浏览器docment高度(包括如果body有边线则包括边线宽)
兼容性非常好,不用考虑 IE7以下- document.body.scrollWidth :浏览器docment宽度(刷新出来的所有宽度,包括可以滚动的宽度)
- document.body.scrollHeight :浏览器docment宽度(刷新出来的所有高度,包括可以滚动的高度)
兼容性非常好- document.body.scrollTop :(待解)
- document.body.scrollLeft :(待解)