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>