Struggling to run in full-screen mode (iOS + Chrome)


#1

Hi there!

I have a game which I’d like to run in full-screen on Chrome browser running on iOS (iPhone 6).
Referring to the documentation, I see that calling app.EnableFullscreen is the recommended route.

http://developer.playcanvas.com/en/api/pc.Application.html#enableFullscreen

I can get this to work on the PC Chrome browser, respond to a mouse-click event, as follows:

     // This works on the PC Chrome browser - I click my mouse, and success - browser switches to full-screen mode.
    var bdy = document.body;
    bdy.addEventListener('click', function () {
        console.error( 'click event - going to call app.enableFullscreen()' );
        app.enableFullscreen(app.canvas, function () {
            console.error('Now fullscreen');
        }, function () {
            console.error('Something went wrong!');
        });
    }, false);

Now if I add very similar code, but responding to the touchstart event, I’d hope that when I run the app on my iOS Chrome browser, it would get rid of the URL bar etc.

           bdy.addEventListener('touchstart', function () {
                console.error( 'touchstart event - going to call app.enableFullscreen()' );
                app.enableFullscreen(app.canvas, function () {
                    console.error('Now fullscreen');
                }, function () {
                    console.error('Something went wrong!');
                });
            }, false);

What happens on my iPhone is that “touchstart event - going to call app.enableFullscreen()” displays on the console, but there is no other TTY, and the browser doesn’t switch to fullscreen mode.

I’ve just tried running this on iOS Safari, and the same outcome - no fullscreen.

Hope that someone is able to advise me!


Hiding address bar in mobile
#2

The Fullscreen API is not supported in iOS Safari:

http://caniuse.com/#feat=fullscreen

And since Chrome for iOS is based on iOS Safari (rather than Blink), it too does not support it.

In iOS Safari, the browser does go fullscreen if you switch to landscape (say for Cardboard VR rendering), but iOS Chrome can’t do this.

According to webglstats.com, iOS Chrome seems to have about 5% of iOS traffic to the sites listed. Slightly more than I expected, TBH.

You could try opening a bug on Chromium if you’d like Google to look into this.

https://bugs.chromium.org/p/chromium/issues/list


#3

Thanks Will.

What a shame :sob:

I’m running in landscape, and doing so both on iOS Chrome & Safari, but still seeing the address bar etc. on both browsers.

Oh well, at least I know I’m not going crazy, and thanks for the tip regarding caniuse.com - will no doubt be referring to that from now on.


#4

What iOS device to you have? 6 Plus? iPad? Certainly, on the 4S and 6, the page goes fullscreen, with no browser address bar, when you flip to landscape.

I know iPads don’t remove the address bar in the same way. Because the 6 Plus is so large, it may behave more like an iPad than the other iPhones.


#5

I’m using an iPhone 6S Plus. So yeah, maybe you’re right about the size of the 6S plus making it behave like an iPad… I’ll see if it’s any different on my iPhone 4S.


#6

Ah, on my 6S+ on Safari it does go full-screen when in Landscape.

I was just using Chrome on the 6S+, and that does not go full-screen in landscape.

I’ll use Safari then for developing my game :slight_smile:


#7

If you want to have your app fullscreen on ios safari on (nearly?) any iPhone/iPad… you ‘just’ have to save the web page as a home screen App : https://www.maketecheasier.com/save-web-page-as-home-screen-app-ios/.

ps : landscape is nearly perfect depending on device (ipad, ipadpro, iphone…) , portrait… you still have some info…


#8

When developing, use Chrome because on my iPad mini at least, Safari crashes. Can’t use PlayCanvas on Safari.


#9

Safari works OK for me on iPhone 6S+ and iPad 2. Might be due to the mini’s lower RAM perhaps? (Just speculating).


#10

It should work, as PlayCanvas consumes very little RAM. It might not work due to outdated iOS version.


#11

Safari on iOS 8 has bug with memory. When page takes more than 3 mb of memory, it reloads.
But usually I got this with a tons of JS, not when page is large because of images, text etc.

So If your browser crashes with PlayCanvas, there better be another reason.


#12

I dunno what the reason is. It’s running the latest iOS 9 version.


#13

Hello,

I see this Topic is a year old. and people must have done lot of R&D in a year to have a full screen feature on iOS and Android.

Do we have any update to make our Game Full Screen by now ?

Best


#14

In a post above I linked to the following:

https://caniuse.com/#feat=fullscreen

You can see that it is still the case that fullscreen works on Android but not on iOS.


#15

Thanks, Jerome! That totally worked. :slight_smile:


#16

one more thing for fullscreen on iphoneX, just add in any script initialize function prototype

window.parent.document.querySelector("meta[name=viewport]").setAttribute("content","initial-scale=1.0, viewport-fit=cover");