全屏切换在 iOS 手机/平板电脑（Safari、Chrome 和 Firefox）上不起作用答案

【问题标题】：Fullscreen toggle doesn't work on iOS mobile/tablet (Safari, Chrome and Firefox)全屏切换在 iOS 手机/平板电脑（Safari、Chrome 和 Firefox）上不起作用
【发布时间】：2017-08-16 14:03:27
【问题描述】：

我在 iOS 移动设备（iPhone 和 iPad，所有版本）上的 web 应用程序中遇到全屏模式问题。

我有一个调用切换全屏功能的按钮。此功能适用于除 iOS 以外的所有设备。

我的功能：

    function toggleFullScreen(e) {
                if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement && !window.navigator.standalone) {  // current working methods
                    if (document.documentElement.requestFullscreen) {
                        document.documentElement.requestFullscreen();
                    } else if (document.documentElement.msRequestFullscreen) {
                        document.documentElement.msRequestFullscreen();
                    } else if (document.documentElement.mozRequestFullScreen) {
                        document.documentElement.mozRequestFullScreen();
                    } else if (document.documentElement.webkitRequestFullscreen) {
                        document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
                    }
                    $('body').css({'height': screen.height});
                    fullSreen = true;
                } else {
                    if (document.exitFullscreen) {
                        document.exitFullscreen();
                    } else if (document.msExitFullscreen) {
                        document.msExitFullscreen();
                    } else if (document.mozCancelFullScreen) {
                        document.mozCancelFullScreen();
                    } else if (document.webkitExitFullscreen) {
                        document.webkitExitFullscreen();
                    }else if(document.cancelFullScreen){
                        document.cancelFullScreen();
                    }
                    $('body').css({'height': 'auto'});
                    fullSreen = false;
                }
    }

它不适用于 iOS 移动/iPad 上的 Safari、Chrome 和 Firefox，但该功能是调用（我尝试使用一些警报消息）。我不明白为什么，提前谢谢！

【问题讨论】：

stackoverflow.com/a/65516223/372347 显示任意 html 元素当前无法全屏显示。除非该元素是视频，否则它将无法在 ios 上运行。

标签： javascript ios mobile fullscreen tablet

【解决方案1】：

请尝试以下代码。它在我的系统中在 iPhone 的所有浏览器中都能正常工作。

HTML

<div class="video-banner-div">  
    <video class="video-bg" id="home_banner_video" playsinline="" autoplay="true" preload="">
        <source src="url_of_your_video.mp4" type="video/mp4">
    </video>
</div>

vid = $('.video-banner-div video').get(0); // get the element of video tag

$(".full-screen-icon").on("click", function () {
   // on click of the button call the toggle function
    toggleFullScreen();
});

function toggleFullScreen() {
    if (vid.requestFullScreen) {
        vid.requestFullScreen();
    } else if (vid.webkitRequestFullScreen) {
        vid.webkitRequestFullScreen();
    } else if (vid.mozRequestFullScreen) {
        vid.mozRequestFullScreen();
    } else if (vid.msRequestFullscreen) {
        vid.msRequestFullscreen();
    } else if (vid.webkitEnterFullscreen) {
       vid.webkitEnterFullscreen(); //for iphone this code worked
    }
}

【讨论】：

【解决方案2】：

您可以在http://caniuse.com/fullscreen 验证 iOS Safari 不提供全屏 API，查看此 asnwer 了解更多信息 Full screen api HTML5 and Safari (iOS 6) 。但是 html 视频元素可以全屏显示。

看看https://brad.is/coding/BigScreen/，是一个很好的处理全屏事件的库。

【讨论】：