1、网页可视区域宽高
let clientWidthHeight = () => ({
clientWidth: document.body.clientWidth,
clientHeight: document.body.clientHeight,
}),
{
clientWidth, clientHeight } = clientWidthHeight();
console.log("网页可视区域宽高：", clientWidth, clientHeight);
2、包括边线的网页可视区域宽高
let offsetWidthHeight = () => ({
offsetWidth: document.body.offsetWidth,
offsetHeight: document.body.offsetHeight,
}),
{
offsetWidth, offsetHeight } = offsetWidthHeight();
console.log("包括边线的网页可视区域宽高：", offsetWidth, offsetHeight);
3、网页正文全文宽高
let scrollWidthHeight = () => ({
scrollWidth: document.body.scrollWidth,
scrollHeight: document.body.scrollHeight,
}),
{
scrollWidth, scrollHeight } = scrollWidthHeight();
console.log("网页正文全文宽高：", scrollWidth, scrollHeight);
4、网页被卷去的高左
let scrollTopLeft = () => ({
scrollTop: document.body.scrollTop,
scrollLeft: document.body.scrollLeft,
}),
{
scrollTop, scrollLeft } = scrollTopLeft();
console.log("网页被卷去的上左：", scrollTop, scrollLeft);
5、网页正文部分上左
let screenTopLeft = () => ({
screenTop: window.screenTop,
screenLeft: window.screenLeft,
}),
{
screenTop, screenLeft } = screenTopLeft();
console.log("网页正文部分上左：", screenTop, screenLeft);
6、屏幕分辨率的宽高
let widthHeight = () => ({
width: window.screen.width,
height: window.screen.height,
}),
{
width, height } = widthHeight();
console.log("屏幕分辨率的宽高：", width, height);
7、屏幕可用工作区宽高
let availWidthHeight = () => ({
availWidth: window.screen.availWidth,
availHeight: window.screen.availHeight,
}),
{
availWidth, availHeight } = availWidthHeight();
console.log("屏幕可用工作区宽高：", availWidth, availHeight);
8、相关链接
博客园-原文