JavaScript Visual Viewport API 接口详解与实战示例

if ('visualViewport' in window) {
    console.log('您的浏览器支持 Visual Viewport API');
} else {
    console.log('您的浏览器不支持 Visual Viewport API');
}

if ('visualViewport' in window) {
    const viewport = window.visualViewport;
    console.log(`视口宽度: ${viewport.width}`);
    console.log(`视口高度: ${viewport.height}`);
    console.log(`缩放比例: ${viewport.scale}`);
    console.log(`左偏移量: ${viewport.offsetLeft}`);
    console.log(`上偏移量: ${viewport.offsetTop}`);
}

if ('visualViewport' in window) {
    const viewport = window.visualViewport;

    viewport.addEventListener('resize', () => {
        console.log('视口大小改变');
        console.log(`新视口宽度: ${viewport.width}`);
        console.log(`新视口高度: ${viewport.height}`);
    });

    viewport.addEventListener('scroll', () => {
        console.log('视口位置改变');
        console.log(`新左偏移量: ${viewport.offsetLeft}`);
        console.log(`新上偏移量: ${viewport.offsetTop}`);
    });
}

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Visual Viewport 示例</title>
    <style>
        #centerBox {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="centerBox"></div>
    <script>
        if ('visualViewport' in window) {
            const viewport = window.visualViewport;
            const box = document.getElementById('centerBox');

            function updateBoxPosition() {
                const centerX = viewport.offsetLeft + viewport.width / 2;
                const centerY = viewport.offsetTop + viewport.height / 2;
                box.style.left = `${centerX - box.offsetWidth / 2}px`;
                box.style.top = `${centerY - box.offsetHeight / 2}px`;
            }

            viewport.addEventListener('resize', updateBoxPosition);
            viewport.addEventListener('scroll', updateBoxPosition);

            updateBoxPosition();
        }
    </script>
</body>
</html>