Полноэкранный API HTML5 не работает в браузере Safari IPhone SE, а также в других последних Iphones

Question

Полноэкранный API HTML5 не работает в браузере Safari IPhone SE, а также в других последних Iphones

1

Я хочу сделать контейнер div в полноэкранном режиме, и он отлично работает во всех настольных браузерах и браузерах Android, но в браузере iPhone (сафари) он не работает.

Я пробовал разные элементы, такие как видео, холст и 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>

Srinivas 25 июль 2017, в 13:50

Источник

Теги:

javascript

html5

ios

iphone

html5-canvas

1 ответ

Ещё вопросы

Benedict Lewis · Accepted Answer · 2017-07-25T08-31-00.000Z

Полноэкранный API не поддерживается iOS Safari: http://caniuse.com/#feat=fullscreen

Потенциально вы можете обойти это, установив стиль элемента в положение абсолютным и заполнив окно. Тем не менее, у вас все еще будет панель навигации.