页面大小通常指网页在浏览器视口中的渲染尺寸,包含以下核心维度:
window.innerWidth/innerHeight
)document.documentElement.scrollWidth/scrollHeight
)getBoundingClientRect()
获取)// 1. 获取视口尺寸(不含滚动条)
const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;
// 2. 获取完整文档尺寸
const docWidth = Math.max(
document.body.scrollWidth, document.documentElement.scrollWidth,
document.body.offsetWidth, document.documentElement.offsetWidth,
document.body.clientWidth, document.documentElement.clientWidth
);
const docHeight = Math.max(
document.body.scrollHeight, document.documentElement.scrollHeight,
document.body.offsetHeight, document.documentElement.offsetHeight,
document.body.clientHeight, document.documentElement.clientHeight
);
// 3. 获取特定元素尺寸
const element = document.getElementById('target');
const rect = element.getBoundingClientRect();
console.log(`元素宽度:${rect.width},高度:${rect.height}`);
问题1:获取的尺寸不准确
box-sizing: border-box
样式问题2:iframe内页面测量
document.body.clientWidth
而非document.documentElement
ResizeObserver
监听元素尺寸变化:ResizeObserver
监听元素尺寸变化:vw/vh
可直接获取视口比例尺寸window.scrollY
/scrollX
获取当前滚动位置<meta name="viewport">
标签使用通过以上方法可全面掌握页面尺寸的获取技术,建议根据具体场景选择最适合的测量方式。
没有搜到相关的文章