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

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!

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

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.

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.

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.

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:

1 Like

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…

3 Likes

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

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

1 Like

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

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.

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

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

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.

Thanks, Jerome! That totally worked. :slight_smile:

1 Like

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");
1 Like

RAM is vital to PlayCanvas working properly. Loading glB requires above iPhone 6 to load; cross applet borders. cf [SOLVED] glTF vs USDZ ... any buzz?

It really depends on what is in the GLB. The test examples I have work fine on an iPhone 5S but they are pretty light on textures.

Uncompressed textures take a lot of VRAM usage and I believe that we now support Basis compressed textures in GLBs now (make sure you have the Basis WASM module from the store)

If you have GLBs that you want to run on low memory devices, I recommend compressing the textures to Basis which will take significantly less VRAM than an compressed texture.

Edit: See more details here: https://github.com/playcanvas/engine/issues/2101

3 Likes