获取浏览器窗口信息
- 页面视口大小，（只跟浏览器窗口有关，不包括工具栏和滚动条）
注：随着窗口的大小而变化，保存页面视口的信息
// chrome
var w = document.documentElement.clientWidth
var h = document.documentElement.clientHeight
// 兼容式写法
var pageWidth = window.innerWidth,
pageHeight = window.innerHeight
if(typeof pageWidth != 'number') {
if (document.compatMode == 'CSS1Compat') {
// 标准模式下
pageWidth = document.documentElement.clientWidth
pageHeight = document.documentElement.clientHeight
} else {
pageWidth = document.body.clientWidth
pageHeight = document.body.clientHeight
}
}
视口大小
- 浏览器窗口本身的尺寸（包括导航栏、书签栏等）
注：和页面大小无关，只和浏览器窗口大小
var w = window.outerWidth
var h = window.outerHeight
浏览器窗口.jpg
- 页面的宽度和高度（与浏览器的页面有关）
注：这个高度全屏情况下为视口状态下的高度，非全屏状态下是整个页面的长度（包括滚动的长度）--此处我也感觉很奇怪（尴尬）
// chrome
var w = document.body.clientWidth
var h = document.body.clientHeight
- 页面滚动区域的宽度、高度
var w = document.documentElement.scrollWidth || document.body.scrollWidth;
var h = document.documentElement.scrollHeight || document.body.scrollHeight;
- 电脑屏幕宽度高度（不关浏览器、顶部工具栏、底部工具栏）
var w = window.screen.width
var h = window.screen.height
- 电脑屏幕可用宽度和高度（电脑屏幕-顶部工具栏-底部工具栏）
var w = window.screen.availWidth
var h = window.screen.availHeight
- 浏览器窗口相对于屏幕的位置
var w = (typeof window.screenLeft == 'number') ? window.screenLeft : window.screenX
var h = (typeof window.screenTop == 'number') ? window.screenTop : window.screenY
浏览器窗口相对于屏幕的位置
感谢您的view，留个赞再走呗
- 感谢浏览姑娘的文章，来自一个写前端的姑娘！
