jQuery 获取页面宽高

Posted 2020-11-20 宋健安

无滚动条的情况下（页面宽高比可视区域小）：
$(document)和$(window)的width、height方法获取的值都是一样的,都是可视区域的宽高
即$(document).width()==$(window).width() $(document).height()==$(window).height()

有垂直滚动条的情况下（页面高度比可视区域高）：
比如，可视区域高度638px,而页面实际高度为900或更多，超出可视区域高度，会出现垂直滚动条
那么$(document)和$(window)的height方法获取的值为页面实际的高度800，而不是638px
$(document)和$(window)的width方法获取的值都是一致的,都是可视区域的宽度（不包含滚动条的宽度）

有水平滚动条的情况下（页面宽度比可视区域更宽）：
比如，可视区域宽度1366,而某个元素宽度为2000，超出可视区域宽度，会出现水平滚动条
那么$(document).width()方法获取的值为页面实际的宽度，也就是2000,而$(window).width()获取的是可视区域的宽度1366，如果浏览器窗口变小了，那么这个值也会变，但$(document).width()还是为2000
$(document)和$(window)的height方法随可视区域高度变化而变化，都是一样的（不包含滚动条的宽度）

都存在的情况下（页面大小比可视区域更大）：
比如，可视区域宽度1366 高度638,而页面宽度2000 高度900，超出可视区域，会出现水平滚动条及垂直滚动条
那么$(document)和$(window)的height方法获取的值为页面实际的高度800，而不是638px
$(document)和$(window)的width方法获取的值都是一致的,都是可视区域的宽度（不包含滚动条的宽度）
$(document).width()方法获取的值为页面实际的宽度，也就是2000,而$(window).width()获取的是可视区域的宽度1366，如果浏览器窗口变小了，那么这个值也会变，但$(document).width()还是为2000