HTML5 Fullscreen API 在 iPhone SE safari 浏览器和其他最新的 Iphone 中不起作用答案

【问题标题】：HTML5 Fullscreen API is not working in IPhone SE safari browser and also in other latest IphonesHTML5 Fullscreen API 在 iPhone SE safari 浏览器和其他最新的 Iphone 中不起作用
【发布时间】：2021-10-22 20:11:55
【问题描述】：

我想让一个 div 容器全屏显示，它在所有桌面浏览器和 android 浏览器中都可以正常工作，但在 iPhone 浏览器 (safari) 中它无法正常工作。

我尝试了不同的元素，如视频、画布和 div，但全屏 API 在 iPhone 浏览器中不起作用。

谁能告诉我如何让 html 5 div 元素在 iPhone 浏览器中全屏显示。

如果 iPhone 浏览器无法实现，那么还有其他解决方法。

我在这里发布我的代码。请提出您的建议。

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <!--<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0">-->
    <!--<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0, minimal-ui">-->
    <!--<meta http-equiv="Pragma" content="no-cache">-->
    <!--<meta http-equiv="Expires" content="-1">-->
    <!--<meta name="apple-mobile-web-app-capable"  content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style"   content="black-translucent" />  
    <meta name="apple-mobile-web-app-title" content="VCollab Web"> -->

    <title>Full Screen test</title>	

    <script>
        window.onload = drawCircle;
        function drawCircle()
        {
            var c = document.getElementById("myCanvas");
            var ctx = c.getContext("2d");
            ctx.beginPath();
            ctx.arc(100,100,80,0,2*Math.PI);
            ctx.fillStyle = 'green';
            ctx.fill();
            ctx.lineWidth = 5;
            ctx.strokeStyle = '#003300';
            ctx.stroke();
        }

        function makeVideoFullscreen(){
            //alert("makeVideoFullscreen");
            var element = document.getElementById("myVideo");
             if (element.requestFullscreen) {
                element.requestFullscreen();
            } else if (element.mozRequestFullScreen) {
                element.mozRequestFullScreen();
            } else if (element.webkitRequestFullscreen) {
                element.webkitRequestFullscreen();
            } else if (element.msRequestFullscreen) {
                element.msRequestFullscreen();
            }     
        }

         function makeCanvasFullscreen(){
           // alert("makeCanvasFullscreen");
            var element = document.getElementById("myCanvas");
             if (element.requestFullscreen) {
                element.requestFullscreen();
            } else if (element.mozRequestFullScreen) {
                element.mozRequestFullScreen();
            } else if (element.webkitRequestFullscreen) {
                element.webkitRequestFullscreen();
            } else if (element.msRequestFullscreen) {
                element.msRequestFullscreen();
            }
            drawCircle();
        }

         function makeDIVFullscreen(){
           // alert("makeDIVFullscreen");
            var element = document.getElementById("myDiv");
             if (element.requestFullscreen) {
                element.requestFullscreen();
            } else if (element.mozRequestFullScreen) {
                element.mozRequestFullScreen();
            } else if (element.webkitRequestFullscreen) {
                element.webkitRequestFullscreen();
            } else if (element.msRequestFullscreen) {
                element.msRequestFullscreen();
            }
        }
    </script> 

</head>
<body>
    
    <video id="myVideo" width="200" height="200" controls>
        <source src="movie.mp4" type="video/mp4">
    Your browser does not support HTML5 video.
    </video><br>
    <input type="button" value="make Video fullscreen" onclick="makeVideoFullscreen()" />

    <hr>

    <canvas id="myCanvas" width="200" height="200" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.
    </canvas><br>
    <input type="button" value="make Canvas fullscreen" onclick="makeCanvasFullscreen()" />
    
    <hr>

    <div id="myDiv" style="border:1px solid #d3d3d3;width:200px;height:200px;background-color:red">
        DIV Container
    </div>
    <input type="button" value="make DIV fullscreen" onclick="makeDIVFullscreen()" />
</body>
</html>

【问题讨论】：

标签： javascript ios iphone html html5-canvas

【解决方案1】：

iOS Safari 不支持全屏 API：http://caniuse.com/#feat=fullscreen

您可以通过将元素的样式设置为绝对位置并填充窗口来解决此问题。但是，您仍然拥有导航栏。

【讨论】：