如有不同的看法或不妥的地方欢迎评论，谢谢！
// 屏幕的宽度
window.screen.width
// 屏幕的高度
window.screen.height
// 屏幕的可用宽度，即减去桌面任务栏（在左侧或者右侧）的宽度等
window.screen.availWidth
// 屏幕的可用高度，即减去桌面任务栏（在顶部或者底部）的高度等
window.screen.availHeight
// 设置或返回一个窗口的外部高度，包括所有界面元素（如工具栏/滚动条）
window.outerHeight
// 设置或返回窗口的外部宽度，包括所有的界面元素（如工具栏/滚动）
window.outerWidth
// 其实就是整个浏览器的宽高，
// 在某些浏览器中，当你缩小浏览器，并把鼠标放在浏览器上，
// 然后使用QQ快捷键截图，你会发现浏览器有外边距，
// 外边距是被包含在外部宽高当中，
// 这两个属性有兼容性问题，在 Google 内核中，当全屏的时候，
// 比如按 F11，然后在控制台打印该属性值，
// 会发现外部宽高小于屏幕宽高，这时候使用QQ快捷键截图，
// 然后取消截取，再次在控制台打印该属性值，又等于屏幕宽高，
// 当然，这个问题我并不晓得，
// 其他主流浏览器在全屏时外部宽高是等于屏幕宽高的，
// 还有一种情况，当浏览器铺满时，
// 除了 Google 内核以外，其他主流浏览器的外部宽度大于屏幕宽度，
// 外部高度大于屏幕的可用高度，Google 内核是相等的
// 所有主流浏览器都支持 outerWidth 和 outerHeight 属性
// 注意：IE 8 及更早 IE 版本不支持该属性
// 返回窗口的文档显示区的宽度
window.innerWidth
// 返回窗口的文档显示区的高度
window.innerHeight
// 所有主流浏览器都支持 innerWidth 和 innerHeight 属性
// 注意：IE 8 及更早 IE版本不支持这两个属性
// 不管有没有出现滚动条，值都是一样的，如下图
image.png
image.png
// 关于 window.innerWidth 和 window.innerHeight
// 有这么一个关系，这里是直接复制菜鸟教程的知识
// 有三种方法能够确定浏览器窗口的尺寸
// 对于 Internet Explorer、Chrome、Firefox、Opera 以及 Safari
window.innerHeight
window.innerWidth
// 对于 Internet Explorer 8、7、6、5
document.documentElement.clientHeight
document.documentElement.clientWidth
// 或者
document.body.clientHeight
document.body.clientWidth
// 实用的 JavaScript 方案（涵盖所有浏览器）
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
// 关于offsetHeight、clientHeight、scrollHeight、offsetWidth、clientWidth、scrollWidth
// 我们先看个例子，如下图
image.png
image.png
// 从得到的数据可以看出
// offsetHeight = 普通高度 + 填充部分（内边距）高度 + 边框高度
// clientHeight = 红色区域内的高度，即普通高度 + 填充部分（内边距）高度 - 底下滚动条的高度
// scrollHeight 此时等于 clientHeight
// 其它的三种宽度同理
// 到这里还没结束哦，因为没有实际出现滚动条，所以还得下一步去验证
// 如下图
image.png
// 可以看出 scrollHeight、scrollWidth 变了，所以
// 当y轴未出现滚动条时，那么
// scrollHeight = clientHeight
// 当y轴出现滚动条时，那么
// scrollHeight = 内容高度 + 上半部填充部分（内边距）高度
// 关于 offsetLeft、clientLeft、scrollLeft、offsetTop、clientTop、scrollTop
// 如下图
image.png
// 从图可知
// offsetLeft = 边框外 距离左边有多少px
// offsetTop = 边框外 距离顶部有多少px
// clientLeft = 边框宽度
// clientTop = 边框高度
// 接下来看有滚动条的情况
// 如下图
image.png
// 可知
// scrollLeft = scrollWidth - clientWidth
// scrollTop = scrollHeight - clientHeight
// 在设置宽高的情况下，获取宽高的属性值为 px 字符串
// 如下图
image.png
// 在未设置宽高的情况下，获取宽高的属性值为空字符串
// 如下图
image.png
网友评论