- 可视区域:可显示网页内容的区域。
-
打开浏览器的控制台,拉动控制台宽/高的时候网页可视区域的宽高也会随之改变,所以可视区域可随意改变。
-
可视区宽高跟网页内容宽高没关系。
-
那可以理解为:可视区域 = 浏览器的页面显示部分
-
先普及一下关于浏览器宽高知识点(了解的可以跳过):
image.png- window.outerHeight :浏览器高度。
- window.outerWidth :浏览器宽度。
- window.innerHeight :浏览器内页面可用高度;此高度包含了水平滚动条的高度(若存在)。可表示为浏览器当前高度减去浏览器边框、工具条后的高度。
- window.innerWidth :浏览器内页面可用宽度;此宽度包含了垂直滚动条的宽度(若存在)。可表示为浏览器当前宽度减去浏览器边框后的宽度。
- 工具栏高/宽度 :包含了地址栏、书签栏、浏览器边框等范围。如:高度,可通过浏览器高度 - 页面可用高度得出,即:window.outerHeight - window.innerHeight。
-
- 可视区域宽高 = window.innerHeight,可随着浏览器窗口大小自动改变
jq获取可视区域宽高:$(window).height();
- 页面内容
- 页面内容宽高:指网页htrml中body的宽高
- 普及一下关于网页内容的知识点(了解可跳过)
- 具体
-
body.offsetHeight :body总高度。
-
body.offsetWidth :body总宽度。
-
body.clientHeight :body展示的高度;表示body在浏览器内显示的区域高度。
-
body.clientWidth :body展示的宽度;表示body在浏览器内显示的区域宽度。
-
滚动条高度/宽度 :如高度,可通过浏览器内页面可用高度 - body展示高度得出,即window.innerHeight - body.clientHeight。
-
- 页面宽高 = document.body.clientHeight
jq:获取页面宽高:$(document.body).height();
网友评论