iOS Safari ignores meta information? (r91 beta)

Hello,

I recently started a project in Construct 2 with the intention of building a web-based pixelart game. My idea was to give it the resolution of 480x260 so that it would work from within any browser on any platform going as low as iPhone 3GS, and scaling up when necessary using fullscreen mode with integer letterboxing.

However, upon exporting the game to HTML5 it seems that iOS isn't picking up on any of the meta tags telling it to treat the website like a web application (or so it seems to me).

For example, the address bar is still showing, and the website is draggable whenever I touch and drag which effectively makes the game unplayable on any iOS device (and possibly Android devices as well?).

Here's a demo so you can see for yourselves.

http://dl.dropbox.com/u/2725629/html5tests/Astrojone/index.html

Toolkit:

Construct 2 r91 beta (64-bit)

Settings:

Preview browser: Firefox

Fullscreen in browser: Letterbox integer scale

Enable WebGL: On

Sampling: Linear

Clear background: No

Tested on:

iPad 2

iPhone 4S

iPhone 3GS

Any ideas?

Safari will always show its UI unless you add it to the home screen. Ran from the home screen it should use fullscreen.

You need to add the Touch object to your project otherwise Construct 2 assumes it's a non-interactive canvas on a web page (e.g. for an advert) and will therefore allow all the default browser actions for touch input.

The Touch object solution worked for the swiping problem, thanks.

Regarding the hiding of UI bars, are you sure that it's not possible? Because I distinctly remember doing it about 10 months ago when I was developing mobile websites by using a bunch of meta tags, and perhaps some JavaScript as well.

Was this perhaps changed in iOS 5 or something?

Also, what about Android devices? Is it possible to remove any UI bars in native Android browsers? I can't test it myself since I don't own any.

As far as I know there are not any mobile browsers that support hiding the browser UI automatically. I may be wrong or behind the times though, so if you find any way to do that, let me know and I can build it in. I thought the only way it was possible on iOS is to 'Add to home screen' where it will then run in Safari without any browsing UI. Alternatively you can try publishing through other platforms (CocoonJS, appMobi, PhoneGap) which wrap it in a native app and always run in fullscreen.

I've already found a solution to hide the browser bar in safari in iOS (I mean directly in the browser).

But as far as I remember, it worked only in landscape mode ... I don't know why...

Let me trying it again and if it still works, I'll give you the solution here.

Ashley

Now that I think about it, there was a simple JavaScript fix that would scroll down the page to hide the address bar.

The HTML5 game Browser Quest that I mentioned in another thread seems to use the same technique - or at least a similar one - where on the login screen it'll scroll down the page to make the address bar vaguely visible (and the page scrollable, though I don't know why), but once you're logged in the screen locks and the address bar remains permanently hidden.

You can try it yourself at http://browserquest.mozilla.org/.

Is this something Construct 2 could utilize?

That's a good idea, I'll see if I can come up with something.