iOS竖屏应用：如何同时启用isElementFullscreenEnabled与视频屏幕旋转？

针对仅支持竖屏的iOS应用中，启用isElementFullscreenEnabled同时实现视频全屏旋转的需求，存在可行的实现方案，核心思路是通过JS监听全屏事件，动态调整应用的设备方向权限，具体步骤如下：

1. 基础配置：启用元素全屏功能 #

首先在WKWebViewConfiguration中开启isElementFullscreenEnabled，确保HTML元素（包括视频和其他自定义元素）能正常触发全屏：

let webConfig = WKWebViewConfiguration()
// 启用元素全屏支持
webConfig.preferences.isElementFullscreenEnabled = true

2. 注入JS脚本，监听视频全屏状态 #

通过WKUserScript注入监听代码，捕获fullscreenchange事件，判断当前全屏元素是否为视频标签，并将状态传递给原生代码：

// 监听全屏变化的JS脚本
let fullscreenScript = """
document.addEventListener('fullscreenchange', () => {
    const fullscreenElement = document.fullscreenElement;
    const isVideoFullscreen = fullscreenElement?.tagName === 'VIDEO';
    // 向原生发送消息
    window.webkit.messageHandlers.fullscreenStatus.postMessage({
        isVideoFullscreen: isVideoFullscreen
    });
});
"""
// 添加到用户脚本
let userScript = WKUserScript(
    source: fullscreenScript,
    injectionTime: .atDocumentEnd,
    forMainFrameOnly: true
)
webConfig.userContentController.addUserScript(userScript)

3. 原生代码接收全屏状态，动态控制设备方向 #

实现WKScriptMessageHandler协议，接收JS传递的视频全屏状态，并重写ViewController的方向控制方法，动态调整允许的旋转方向：

3.1 接收JS消息 #

class WebViewController: UIViewController, WKScriptMessageHandler {
    // 标记当前是否为视频全屏状态
    private var isVideoFullscreen = false

    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        guard let statusDict = message.body as? [String: Bool],
              let status = statusDict["isVideoFullscreen"] else { return }
        
        isVideoFullscreen = status
        // 触发方向权限更新
        setNeedsUpdateOfSupportedInterfaceOrientations()
        
        // 强制调整方向：视频全屏时同步当前设备方向，退出时回到竖屏
        if status {
            let currentOrientation = UIDevice.current.orientation
            if currentOrientation.isLandscape {
                UIDevice.current.setValue(currentOrientation.rawValue, forKey: "orientation")
            }
        } else {
            UIDevice.current.setValue(UIInterfaceOrientation.portrait.rawValue, forKey: "orientation")
        }
    }
}

3.2 重写方向控制方法 #

extension WebViewController {
    override var supportedInterfaceOrientations: UIInterfaceOrientationMask {
        isVideoFullscreen ? .allButUpsideDown : .portrait
    }
    
    override var shouldAutorotate: Bool {
        isVideoFullscreen
    }
}

4. Info.plist配置注意事项 #

必须在Info.plist中添加所有需要支持的方向（竖屏、左横屏、右横屏），否则动态调整方向会失效：

• UISupportedInterfaceOrientations数组中包含：
  • UIInterfaceOrientationPortrait
  • UIInterfaceOrientationLandscapeLeft
  • UIInterfaceOrientationLandscapeRight

方案说明 #

此方案既保留了isElementFullscreenEnabled = true的功能（所有HTML元素均可触发全屏），又实现了视频全屏时允许设备旋转，退出后自动恢复竖屏的需求，兼容iOS 15.4及以上版本，覆盖手动点击视频全屏按钮、JS触发全屏等多种场景。

内容的提问来源于stack exchange，提问作者Vicente Garcia