iPhone端Safari浏览器全屏功能失效问题及代码修复咨询

问题根源 #

iPhone Safari 对全屏 API 有几项特殊限制，是导致你的代码失效的核心原因：

• 全屏请求必须由用户主动交互触发（比如点击、触摸事件），脚本自动执行会被浏览器拦截；
• 旧版 iOS Safari（iOS 12 及更早）使用 webkitEnterFullscreen 而非 webkitRequestFullscreen，早期仅支持 <video> 元素，后续版本才扩展到其他元素；
• 原代码存在变量名错误（fullscreenImage.msRequestFullscreen() 里的变量名应为 devTag）。

修复后的完整代码 #

// 必须绑定在用户交互事件中，比如点击按钮
document.getElementById('trigger-fullscreen').addEventListener('click', function() {
    var devTag = document.getElementById('iframe_container');
    
    // 统一兼容各浏览器的全屏方法
    var fullscreenMethod = devTag.requestFullscreen ||
                          devTag.mozRequestFullScreen ||
                          devTag.webkitRequestFullscreen ||
                          devTag.webkitEnterFullscreen || // 适配旧版iPhone Safari
                          devTag.msRequestFullscreen;

    if (fullscreenMethod) {
        try {
            // 针对iPhone Safari的特殊处理
            if (navigator.userAgent.match(/iPhone|iPod/i)) {
                // 给元素设置基础样式，避免全屏布局异常
                devTag.style.position = 'relative';
                devTag.style.width = '100%';
                devTag.style.height = '100%';
                
                // 区分新旧版Safari的API
                if (devTag.webkitEnterFullscreen) {
                    devTag.webkitEnterFullscreen();
                } else {
                    devTag.webkitRequestFullscreen();
                }
            } else {
                // 其他浏览器保留键盘输入支持
                fullscreenMethod.call(devTag, Element.ALLOW_KEYBOARD_INPUT || undefined);
            }
        } catch (err) {
            alert(`全屏启动失败: ${err.message}`);
        }
    } else {
        alert("当前浏览器不支持全屏模式");
    }
});

关键改动说明 #

1. 绑定用户交互：把全屏请求放在点击事件回调内，符合 iPhone Safari 的安全限制；
2. 兼容旧版 API：添加 webkitEnterFullscreen 支持，覆盖 iOS 12 及更早的 Safari 版本；
3. 修复变量错误：统一用 devTag 变量调用全屏方法，避免原代码中的变量名混乱；
4. 样式兜底：给目标元素设置相对定位和宽高 100%，防止 iPhone Safari 全屏时出现布局错位；
5. 异常捕获：用 try-catch 捕获错误，方便调试和给用户反馈。

额外注意事项 #

如果目标是 <iframe> 元素，必须给 iframe 添加 allowfullscreen 属性，否则无法触发全屏：

<iframe id="iframe_container" src="your-content.html" allowfullscreen></iframe>

内容的提问来源于stack exchange，提问作者Tharindu Anjana