Full Screen Web App on iPad/iPhone

Hi all, does anyone know if it’s possible for a web app to run full screen on an iPad or iPhone, or do you have to have the usual MobileSafari URL bar at the top of the screen and the back/forward/share/bookmark/pages buttons on the bottom? If you can do a full screen web page, do you know how? I’d be grateful to know.

I believe you can set the viewport scale in in the HTML header of the app.

Thanks Brock, that’s great. I didn’t know anything about the viewport scale. I just banged out a quick test app and it looks like the thing to use. Rotating the device causes the URL bar and buttons to reappear but this may not be an issue for me and I may be able to trap that. Thank you very much for your help. Does that mean that using the viewport scale I can get my web apps to be resizable by pinch and zoom by setting maximum-scale to say 2.0?

Yes it does! Thanks Brock, that’s great. Thanks very much.

That header should already be set. If you go to your app via safari and then select “Add To Home Screen” you’ll have a full-screen app all the time.

Hi Greg, thanks but it wasn’t set. I copied it in to the HTMLHeader from the text above.

Huh. I just opened a completely empty project and the headers include:

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">

Now I will tell you that if you add your own matching header, we remove ours.

Hi Greg, I just created a new Web app in Xojo Pro 2014r1 and the App HTMLHeader property is blank. Clicking the edit button brings up the editor, and it is blank.

Right, but we include a bunch of headers by default, even if you don’t. When you run the project, view the source and you’ll see that the header is already there.

You may want to have a look here : https://forum.xojo.com/13980-set-browser-to-fullscreen-and-get-screen-size

Thanks Greg and Michel, that’s really helpful.

This is why one of my users said: “I don’t need an IOS-app, since this is just fine for me”. I just added a nice icon to the webapp and changed the launching message.

The nice part about that is it will also work on Android devices.