How to hide address and status bars on mobile?

[end3r]

Do you have any good bulletproof universal way to hide those bars on your mobile HTML5 games on different devices? There was scrollTo approach, but it's old, not always work and it's buggy. Any ideas or working resources on the topic?

 

I'm using Canvas CSS3 Transforms in Captain Rogers to scale it up to have 100% of the height, but the problem with the bars forces the game to be still quite small.

[xerver]

good bulletproof universal way

 

That phrase almost *never* applies to web programming.

 

That being said, looks like the way to do this is with `window.scrollTo(0,1)`:

 

function hideURLbar() {	if (window.location.hash.indexOf('#') == -1) {		window.scrollTo(0, 1);	}}if (navigator.userAgent.indexOf('iPhone') != -1 || navigator.userAgent.indexOf('Android') != -1) {    addEventListener("load", function() {            setTimeout(hideURLbar, 0);    }, false);}

 

See:

 

http://davidwalsh.name/hide-address-bar

http://stackoverflow.com/questions/4068559/removing-address-bar-from-browser-to-view-on-android

http://atlchris.com/1847/quick-tip-hide-mobile-web-browser-address-bar-improved/

[end3r]

I mean the best way possible out of the available options

 

Those two links are 2 years old - I know how to use Google, both ways did not work for me, that's why I asked here.

 

Thanks for the source code though - it didn't worked on Samsung Galaxy S3, on iPhone 4 is still kind of buggy, but it at least hide the bars which didn't worked earlier.

[Jorasso]

I also always have some problems with proper hiding address bar on different devices and browsers.

 

It won't be so helpful, but I noticed that games made with TreSensa game engine solve it pretty well. It could be a good idea to look what tricks they use to make it working.

[austin]

It's been a while since I messed around with it, but here's what we have:

 

CoffeeScript:

# Hide URL bar on mobile# Make the page taller so it scrolls on mobile (first load)pageFill = nullif (document.body.clientHeight - 75) < window.innerHeight	pageFill = document.createElement("div")	pageFill.style.height = ( window.innerHeight - document.body.clientHeight + 75 ) + "px"	document.getElementsByTagName("body")[0].appendChild pageFilldoScrollTop = setInterval(->	if document.body		clearInterval doScrollTop		scrollTo 0, 1		pageYOffset = 0		scrollTo 0, (if (pageYOffset == document.body.scrollTop) then 1 else 0)		setTimeout ->			# remove that extra padding we put in			if pageFill				document.getElementsByTagName("body")[0].removeChild pageFill 		, 1000, 200)

Here's what that compiled CoffeeScript ends up as JavaScript:

var doScrollTop, pageFill;pageFill = null;if ((document.body.clientHeight - 75) < window.innerHeight) {  pageFill = document.createElement("div");}pageFill.style.height = (window.innerHeight - document.body.clientHeight + 75) + "px";document.getElementsByTagName("body")[0].appendChild(pageFill);doScrollTop = setInterval(function() {  var pageYOffset;  if (document.body) {    clearInterval(doScrollTop);    scrollTo(0, 1);    pageYOffset = 0;    scrollTo(0, (pageYOffset === document.body.scrollTop ? 1 : 0));    return setTimeout(function() {      if (pageFill) {        return document.getElementsByTagName("body")[0].removeChild(pageFill);      }    }, 1000);  }}, 200);

A little hack-ish, but I don't think we've run into any issues with it recently. Perhaps there's a more glamorous solution out there though.

 

Not sure how the CSS transforms are effected though.

[remvst]

Those two links are 2 years old - I know how to use Google, both ways did not work for me, that's why I asked here.

Your page needs to be taller than the screen. You can add margin-bottom to your body if needed.

[rich]

The only thing I've found that consistently worked is Zynga's Viewporter lib. It doesn't matter that it's a few years old as nothing has changed since then, it's still as crap now as it was back then.

 

I recently recoded it extensively for Phaser and added in a lot more options, but it's very tied to the framework and not easy to extract, but may be worth looking at for some pointers.

[Aduros]

iOS 7 breaks the scrollTo() trick. Has anyone figured out a workaround?

[rich]

There's no workaround (yet). There is an on-going discussion on the Apple Developer Forums about this.

 

It sucks quite frankly. At the very least they could have implemented the fullscreen API.

[Ezelia]

does those solutions work on Android Chrome mobile for you ? it's not working on my Nexus 7 :/