Mobile Firendly Safari Address Bar

[sofritos]

Hello, 

We are developing an HTML game using the Phaser framework with Javascript. We have run into some issues regarding the mobile usability for Safari on iPhones. At certain times the player's address bar appears, when this happens the game is moved down. Since the game is moved down, we lose access to part of the game. That leads me to our two questions:

1) How can we detect a swipe motion and then use that motion to hide the address bar?

2) How can we detect that the player address bar is open in the the first place?

[snowbillr]

I haven't really done much development targeted at iOS, but I'd be very surprised if they exposed any APIs that allowed you to adjust their browser. I don't think you'll be able to find out if their browser is showing the address bar.

 

You might be able to get around this by having your application enter full screen mode. Have you tried that?

[sofritos]

Some people, not using phaser, can detect if the address bar is there.

http://showcasecw.playngonetwork.com/Casino/PlayMobile?pid=2&gid=vikingrunecraftmobile&ctx=AllGames&lang=en_GB&practice=1&ticket=&lobby=http%3A%2F%2Fwww.playngo.com%2FGames

We are trying to achieve something like this.

How would be go about entering full screen mode?

[snowbillr]

I'm no type so sure they are detecting it as much as they are using the full amount of space available to them on the screen - I'm unable to scroll on that page at all on my iPhone. 

Maybe there'd be a way to detect if the address bar is showing by checking the useragent to find out if the user is on an iPhone, then listening for resize events on the DOM. It's possible those are being fired when the address bar appears/disappears. 

Im not so sure about how full screen mode works, I'm sorry. Someone else will have to answer that one for you. 

[samme]

I don't think iPhones support the Fullscreen API at all.

When does the address bar appear?

[Abhishek Singhal]

you may check for
window.screen.availHeight , window.screen.height and window.innerHeight

the differences in these factors can be used to ensure if the address bar is open.
We could have also used window.outerHeight, But on apple devices its value is always 0. So, We should exclude window.outerHeight.

[sofritos]

Thanks guys, I logged the following:

console.log(
    " window.innerWidth "+window.innerWidth+" window.innerHeight "+window.innerHeight+
    " window.outerWidth "+window.outerWidth+" window.outerHeight "+window.outerHeight+
    " window.screen.width "+window.screen.width+" window.screen.height "+window.screen.height+
    " window.screen.availWidth "+window.screen.availWidth+" window.screen.availHeight "+window.screen.availHeight+
    " document.documentElement.clientWidth "+document.documentElement.clientWidth+
    " document.documentElement.clientHeight "+document.documentElement.clientHeight
);

Window.innerWidth and window.innerHeight show the dimension of the window when the address bar is opened. It can be compared to document.clientWidth and document.clientHeight which do not take the address bar into account.