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();
        }
    }
}

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/course/34_2155