Full screen function not working on IOS


#1

I used following code to have a fullscreen mode on my hype project.
function fullscreen(hypeDocument,element,event) {
var docElm = document.documentElement;
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
}
else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}

however, it is works on desktop various bowers,not woking when I tried to use my phone to display it. I added the URL on the home screen, the address bar still shows on the top. I want it looks like a real app than a website. Anyone know how to hide the address bar?

Thank you!


#2

There’s no notion of ‘Full screen’ within iOS 9 or iOS 10 unless you can get your web content within a Web app or within an actual app. I’m not familiar with how Android handles this. One reason for never hiding the URL bar completely is because of security: It’s important to know what domain you are visiting.

To get full screen on a web app, you would need check the ‘Home screen web app’ checkbox in the document inspector, and also instruct the user to add the app to their Home screen by using this button on the share panel:

When they open it from their home screen it will appear full screen without any status bar.


#3

Thank you!
I tried add to home screen but it still showing the URL bar. What do you mean by “need check the ‘Home screen web app’ checkbox in the document inspector”? Is there any code could hide the URL once user add to home screen?

Thank you!


#4

This is one of the options in the Document Inspector explained here: http://tumult.com/hype/documentation/3.0/#document-options