0
我想打一个div容器全屏等最新的iPhone，它在所有桌面浏览器和Android浏览器，但在iPhone浏览器（Safari浏览器）工作正常，它不管用。HTML5全屏API不IPhone SE 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> \t
<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>