Fullscreen WebGL mobile on iOS

Unity Engine
1

I know WebGL for mobile is not officially supported, but I am having quite good success with this anyway when being mindful to all limitations and frequently testing on various handsets.

Is there a good way to enable full screen mode on iPhone / iPad? Screen.fullscreen does not work, also the HTML based fullscreen button does not work on iOS (works on Android though).

1 Like
2

That might be a limitation of Safari on iOS. Which browser have you used on Android?

3

Thank you for this link. So, looks like iOS just doesnt support fullscreen… That is too bad, my project really relies on this as we want to target VR on mobile through web, and then we need to make sure the content is aligned with the carboard or other VR glasses the user has… :S

I Tested on Chrome and Firefox on Android. Both have no issues with fullscreen.

But, even if it is not possible to have true fullscreen, it would be useful to let the container with the Unity player resize automatically using style sheets or the proper HTML parameters?

I am not sure how to do this though…

4

I’d like to know as well. Also, are there any events one can listen for when the window has been resized?

5

You can use the browser communication to have JavaScript call functions inside unity, and unity call functions in the JavaScript. Using this, you can use the JavaScript to determine the size of the browser window, and resize the unity player appropriately.

6

How would you resize the unity player? Resize it’s container? Sorry, I am not experienced with browser scripting.

7

Back when I was testing this (~1.5 years ago), I was able to resize the unity window in the browser by doing two things:

  • Resize the element on the webpage, and at the same time
  • Change the resolution in unity.

With my tests, I added a button on the webpage. When the user clicked the button it ran some javascript that did something along the lines of

// Unity player
document.getElementById("unityPlayer").style.width = newWidth + 'px';            document.getElementById("unityPlayer").style.height = newHeight + 'px';

in addition, I had an object in Unity called WebpageComm which handled all communication from the javascript on the page. When running the above javascript, I also called something along the lines of…

var unityElement = document.getElementById("unityPlayer");
            width = unityElement.offsetWidth;
            height = unityElement.offsetHeight;

            u.getUnity().SendMessage("WebpageComm", "UpdateWidth", width);
            u.getUnity().SendMessage("WebpageComm", "UpdateHeight", height);

which in turn calls those functions on the object in unity. In the UpdateWidth and UpdateHeight functions, I changed the player resolution so it would match the size of the player in the browser.

4 Likes
8

Hello! Does anyone have an answer to this problem? I see that on Safari iOS and Chrome iOS, Youtube fullscreen works. A Unity WebGL inside a page can’t do the same?

9

Videos are different, IOS has their own video player for videos that supports fullscreen

10

You can more or less do this if you have the user add your website to their home screen. This is what Google Stadia does for iOS — and it lets users play games full-screen on iOS via Safari. It’s just they have to add to homescreen & launch from homescreen first.