Search Unity

  1. We are migrating the Unity Forums to Unity Discussions. On July 12, the Unity Forums will become read-only. On July 15, Unity Discussions will become read-only until July 18, when the new design and the migrated forum contents will go live. Read our full announcement for more information and let us know if you have any questions.

Fullscreen WebGL mobile on iOS

Discussion in 'Web' started by TOES2, Jun 10, 2017.

  1. TOES2

    TOES2

    Joined:
    May 20, 2013
    Posts:
    135
    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).
     
    noobengineer likes this.
  2. Marco-Trivellato

    Marco-Trivellato

    Unity Technologies

    Joined:
    Jul 9, 2013
    Posts:
    1,654
    That might be a limitation of Safari on iOS. Which browser have you used on Android?
     
  3. TOES2

    TOES2

    Joined:
    May 20, 2013
    Posts:
    135
    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. summerian

    summerian

    Joined:
    Jul 6, 2014
    Posts:
    140
    I'd like to know as well. Also, are there any events one can listen for when the window has been resized?
     
  5. dcarrigg

    dcarrigg

    Joined:
    May 21, 2014
    Posts:
    24
    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. TOES

    TOES

    Joined:
    Jun 23, 2017
    Posts:
    134
    How would you resize the unity player? Resize it's container? Sorry, I am not experienced with browser scripting.
     
  7. dcarrigg

    dcarrigg

    Joined:
    May 21, 2014
    Posts:
    24
    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
    Code (CSharp):
    1. // Unity player
    2. 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...
    Code (CSharp):
    1. var unityElement = document.getElementById("unityPlayer");
    2.             width = unityElement.offsetWidth;
    3.             height = unityElement.offsetHeight;
    4.  
    5.             u.getUnity().SendMessage("WebpageComm", "UpdateWidth", width);
    6.             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.
     
  8. AlgetecTec

    AlgetecTec

    Joined:
    Apr 15, 2019
    Posts:
    5
    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. boasbakker123

    boasbakker123

    Joined:
    Jan 22, 2020
    Posts:
    11
    Videos are different, IOS has their own video player for videos that supports fullscreen
     
  10. aromana

    aromana

    Joined:
    Nov 11, 2018
    Posts:
    137
    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.