window视口尺寸获取
这是一个用于跨浏览器获取浏览器视口（viewport）尺寸的函数。它处理了不同浏览器和文档模式的兼容性问题，返回视口的宽度和高度。
代码如下
function getViewportSize() {
var width, height;
// 优先使用标准api
if (window.innerWidth !== undefined) {
width = window.innerWidth;
height = window.innerHeight;
}
// 后备方案：根据文档模式选择
else if (document.compatMode === "BackCompat") {
// 怪异模式
width = document.body.clientWidth;
height = document.body.clientHeight;
} else {
// 标准模式
width = document.documentElement.clientWidth;
height = document.documentElement.clientHeight;
}
return {
width: width,
height: height
};
}返回值：
包含视口宽度和高度的对象：{width: number, height: number}
使用场景
1. 响应式布局判断
function checkBreakpoint() {
var viewport = getViewportSize();
if (viewport.width >= 1200) {
return 'desktop';
} else if (viewport.width >= 768) {
return 'tablet';
} else {
return 'mobile';
}
}
// 使用
var currentBreakpoint = checkBreakpoint();
console.log('当前断点:', currentBreakpoint);2. 滚动检测
function isElementInViewport(element) {
var viewport = getViewportSize();
var rect = element.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= viewport.height &&
rect.right <= viewport.width
);
}
// 懒加载检测
function checkLazyLoad() {
var lazyElements = document.querySelectorAll('.lazy-load');
lazyElements.forEach(function(element) {
if (isElementInViewport(element)) {
element.src = element.dataset.src;
element.classList.remove('lazy-load');
}
});
}3. 窗口 resize 处理
function createResponsiveHandler() {
var lastWidth = 0;
return function() {
var viewport = getViewportSize();
// 只在宽度变化较大时执行（防抖动）
if (Math.abs(viewport.width - lastWidth) > 50) {
lastWidth = viewport.width;
// 执行响应式逻辑
handleViewportChange(viewport);
}
};
}
function handleViewportChange(viewport) {
console.log('视口尺寸变化:', viewport.width, 'x', viewport.height);
// 更新UI或执行其他响应式操作
if (viewport.width < 768) {
document.body.classList.add('mobile-layout');
document.body.classList.remove('desktop-layout');
} else {
document.body.classList.add('desktop-layout');
document.body.classList.remove('mobile-layout');
}
}
// 监听窗口变化
window.addEventListener('resize', createResponsiveHandler());4. 全屏检测
function isFullscreen() {
var viewport = getViewportSize();
var screen = window.screen;
return (
viewport.width >= screen.availWidth &&
viewport.height >= screen.availHeight
);
}
function toggleFullscreen() {
if (!isFullscreen()) {
// 进入全屏
var docElement = document.documentElement;
if (docElement.requestFullscreen) {
docElement.requestFullscreen();
}
}
}本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！