javascript - HTML5 Fullscreen API is not working in IPhone SE safari browser and also in other latest Iphones -
i want make div container full-screen , works fine in desktop browsers , android browsers in iphone browser (safari) not working.
i tried different element video,canvas , div full-screen api not working in iphone browser.
can 1 please tell me how make html 5 div element full-screen in iphone browser.
if not possible iphone browser other workaround there.
i posting code here. please give 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"> browser 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;"> browser not support 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>
the fullscreen api not supported ios safari: http://caniuse.com/#feat=fullscreen
potentially workaround setting element's style position absolute, , fill window. however, you'll still have nav bar.
Comments
Post a Comment