[英]HTML5 Fullscreen API is not working in IPhone SE safari browser and also in other latest Iphones
我想将div容器设置为全屏显示，并且在所有桌面浏览器和android浏览器中都可以正常运行，但在iPhone浏览器（Safari）中却无法正常运行。
我尝试了其他元素，例如视频，画布和div，但全屏API在iPhone浏览器中无法正常工作。
谁能告诉我如何在iPhone浏览器中将html 5 div元素变为全屏。
如果使用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>
iOS Safari不支持全屏API： http : //caniuse.com/#feat=fullscreen
可能您可以通过将元素的样式设置为绝对位置并填充窗口来解决此问题。 但是，您仍将拥有导航栏。
HTML5视频API-全屏无法在iPad上使用Chrome / Safari浏览器
[英]HTML5 Video API - Fullscreen not working with chrome/safari on iPad
Chrome / Safari HTML5视频全屏模式无法正常运行
[英]Chrome / Safari HTML5 Video Fullscreen Mode not working properly
Html5 表单验证不适用于 iphone、android 或 safari
[英]Html5 form validation not working with iphone, android or safari
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.