获取页面高度和宽度等

首先来了解一下布局视口和视觉视口
PC端： 布局视口 = 视觉视口
移动端：
(1)布局视口：

(2) 视觉视口

然后总结一下各种页面的高度和宽度如下：
测试Chrome版本：71.0.3578.98（正式版本）

1. 获取页面相关的高度

• 获取网页布局视口的高（不包括菜单栏，水平滚动条，margin和border，包括padding）

var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
//jQuery:
var clientHeight = $(window).height();

如下图所示

• 获取网页视觉视口的高（不包括菜单栏（顶部和底部），包括水平滚动条/border/margin/padding）

var innerHeight = window.innerHeight

• 获取整个浏览器窗口的高（包括顶部菜单栏，包括水平滚动条，不包括底部菜单栏）

var outerHeight = window.outerHeight (1080*1920的浏览器的值为1040 = 1080 - 40(底部菜单栏的高度))

• 获取页面理想视口高度（理想视口=视觉视口*页面缩放比，在页面缩放比是100%时，理想视口 = 视觉视口，对于分辨率为1920乘1080的显示屏来说，不管怎么缩放，理想视口的高度都不变，而视觉视口高度会变化）

var height =window.screen.height（1080）

• 获取页面body的高（不包括菜单栏，包括垂直滚动条滚动的高度，padding，margin，border，水平滚动条）

var bodyHeight = document.documentElement.offsetHeight ||  document.body.offsetHeight;
//jQuery:
var bodyHeight = $('body').height()

• 获取滚动条卷起的高度

var screenScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
//jQuery:
var screenScrollTop  = $(window).scrollTop();

2. 获取页面相关宽度

• 获取页面布局视口宽度（不包括包括滚动条，滚动条的宽度一般是17px, 也不包括border和margin，包括padding；布局视口的宽度是一个固定值，不会随着页面的缩放而改变）

 var clientWidth = document.documentElement.clientWidth || document.body.clientWidth;

• 获取网页视觉视口的宽度（包括滚动条/border/margin/padding）

var screenWidth =  window.innerWidth;

• 获取页面理想视口宽度（理想视口=视觉视口页面缩放比，在页面缩放比是100%时，理想视口 = 视觉视口，对于分辨率为19201080的显示屏来说，不管怎么缩放，理想视口的宽度都不变，视觉视口宽度会变化）

var width = window.screen.width(1920)

参考：
JS 获取屏幕、浏览器、页面的高度宽度