js获取浏览器窗口信息

获取浏览器窗口信息

1. 页面视口大小，（只跟浏览器窗口有关，不包括工具栏和滚动条）
   注：随着窗口的大小而变化，保存页面视口的信息

// 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
  }
}

视口大小

2. 浏览器窗口本身的尺寸（包括导航栏、书签栏等）
   注：和页面大小无关，只和浏览器窗口大小

var w = window.outerWidth
var h = window.outerHeight

浏览器窗口.jpg

3. 页面的宽度和高度（与浏览器的页面有关）
   注：这个高度全屏情况下为视口状态下的高度，非全屏状态下是整个页面的长度（包括滚动的长度）--此处我也感觉很奇怪（尴尬）

// chrome
var w = document.body.clientWidth
var h = document.body.clientHeight

4. 页面滚动区域的宽度、高度

var w = document.documentElement.scrollWidth || document.body.scrollWidth;
var h = document.documentElement.scrollHeight || document.body.scrollHeight;

5. 电脑屏幕宽度高度（不关浏览器、顶部工具栏、底部工具栏）

var w = window.screen.width
var h = window.screen.height

6. 电脑屏幕可用宽度和高度（电脑屏幕-顶部工具栏-底部工具栏）

var w = window.screen.availWidth
var h = window.screen.availHeight

7. 浏览器窗口相对于屏幕的位置

var w = (typeof window.screenLeft == 'number') ? window.screenLeft : window.screenX
var h =  (typeof window.screenTop == 'number') ? window.screenTop : window.screenY

浏览器窗口相对于屏幕的位置

感谢您的view，留个赞再走呗

• 感谢浏览姑娘的文章，来自一个写前端的姑娘！