移动端调用requestFullscreen后如何启用捏合缩放功能？

首先明确：使用原生requestFullscreen()进入全屏后，移动端浏览器会强制禁用用户缩放，这是浏览器的默认行为（即使你在viewport里设置了user-scalable=yes也无效），目的是防止全屏内容被误操作缩放，破坏沉浸式体验。目前没有直接通过Fullscreen API启用缩放的官方方案，但可以通过模拟全屏效果来保留缩放功能。

替代方案：模拟全屏（保留缩放） #

不使用原生Fullscreen API，而是通过CSS将目标容器铺满整个视口，同时隐藏浏览器的地址栏（部分移动端浏览器支持滚动隐藏），这样viewport的缩放规则依然生效，捏合缩放可以正常使用。

修改后的示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=12.0, minimum-scale=.25, user-scalable=yes"/>
    <style>
        /* 模拟全屏的容器样式 */
        .fullscreen-simulate {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            margin: 0;
            padding: 1rem;
            box-sizing: border-box;
            background-color: white;
        }
        body {
            margin: 0;
            /* 防止页面滚动 */
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="container" style="background-color: white;">
        <button onclick="toggleFullscreen()">Toggle Fullscreen</button>
        <p id="message">Example</p>
    </div>

    <script>
        function toggleFullscreen() {
            const container = document.getElementById('container');
            if (container.classList.contains('fullscreen-simulate')) {
                // 退出模拟全屏
                container.classList.remove('fullscreen-simulate');
                document.body.style.overflow = 'auto';
                // 触发滚动让地址栏重新显示（部分浏览器）
                window.scrollTo(0, 1);
            } else {
                // 进入模拟全屏
                container.classList.add('fullscreen-simulate');
                document.body.style.overflow = 'hidden';
                // 滚动到顶部隐藏地址栏（部分移动端浏览器）
                setTimeout(() => window.scrollTo(0, 0), 100);
            }
        }
    </script>
</body>
</html>

为什么原生全屏无法保留缩放？ #

根据Fullscreen API的规范，移动端浏览器在原生全屏模式下会锁定视口缩放，这是出于安全和体验的考量——避免用户在全屏沉浸式内容中误触缩放，导致内容显示异常。目前没有标准参数或配置可以绕过这个限制。

内容的提问来源于stack exchange，提问作者Felipe Yáñez