3

I want to make a div container to full-screen and it works fine in all desktop browsers and android browsers but in iPhone browser (safari) it is not working.

I tried different element like video,canvas and div but full-screen API is not working in iPhone browser.

Can any one please tell me how to make the html 5 div element to full-screen in iPhone browser.

if it is not possible with iPhone browser then any other workaround is there.

I am posting my code here. please give your suggestions.

<!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>

1 Answer 1

2

The fullscreen API is not supported by iOS Safari: http://caniuse.com/#feat=fullscreen

Potentially you could workaround this by setting the element's style to position absolute, and fill the window. However, you'll still have the nav bar.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.