0 Favourites

Lock orientation on Mobile browsers

  • Hi everyone,

    A client asks me for an HTML5 game which will be played mostly on mobile, and the game needs to be locked horizontally.

    I referred to this tutorial by Ashley, in which I learned that screen locking only happens after requesting fullscreen, and fullscreen is potentially not supported on every browser.

    So I made a test, and fullscreen mode is working fine on desktops, but not in a single mobile browser.

    I tried the following browsers:

    iOS Safari

    iOS Chrome

    Android Browser

    Android Chrome (on 2 different devices)

    and the fullscreen mode is never recognized on mobile devices. Which is a big problem for me... <img src="{SMILIES_PATH}/icon_e_sad.gif" alt=":(" title="Sad"> Is there any workaround which would allow me to lock orientation? Or maybe did I do something wrong?

    On the link above I see that most browsers are notes as "partially supported". Do I need to do something special to access that feature?

    On the code standpoint, I defined the Orientation as "Landscape" in the project settings, and am requesting the fullscreen on the title screen, on a "Touch" trigger event.

    If you want to test the game, here is the WIP: http://test.smurf.com/drop18/

    Oh and it needs to be an HTML5 game playable in a browser, no export with cordova.

    Thanks for your help!

  • When youre building the APKs there's a setting for Orientation. In Cocoon for example in the Settings it shows the orientation. Intel XDX should have the same thing (I'd recommend Cocoon cause intels being tards and not supporting building apks anymore.

    In Cocoon under Settings there is Orientation:

    That lets you set the orientation. Make sure you change in both Default and the system(s) you're building apks and files for.

  • Oh and it needs to be an HTML5 game playable in a browser, no export with cordova.

    Thanks for the reply, but I don't want to make an APK. The game should be playable fullscreen and horizontally in a browser. :/

  • >

    > Oh and it needs to be an HTML5 game playable in a browser, no export with cordova.

    >

    >

    Thanks for the reply, but I don't want to make an APK. The game should be playable fullscreen and horizontally in a browser. :/

    In Construct 2 whats your configuration setting? My Fullscreen in Browswer is set to Letterbox Scale and Orientations is Landscape. Letterbox Scale and Landscape are working for me.

  • Construct 3

    Buy Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Buy Now Construct 3 users don't see these ads
  • Both are working for me too, as well as fullscreen mode, as long as I am on desktop.

    On mobile / tablet I can't have the fullscreen to work. If you try the link I gave in the first post, are you able to play in fullscreen on both desktop and mobile?

    I personally don't.

  • Rable

    Could you compare the WindowHeight and WindowWidth and Set layout angle accordingly?

    Something like:

    WindowHeight > WindowWidth

    Trigger once while true

    Set layout angle to 90

    WindowWidth > WindowHeight

    Trigger once while true

    Set layout angle to 0

    EDIT: Or use the Browser Is Portrait/Landscape condition instead of comparing WindowWidth and WindowHeight

  • OddConfection

    That's a clever idea!

    I tried it (with browser orientation), and the result is sadly not what we would expect. The layout indeed rotate 90 degrees, but the window doesn't change size and doesn't rotate (I'm in letterbox scale fullscreen mode). So basically if you're holding your phone in portrait, you've got a small horizontal window in the middle , with the layout inside it rotated 90 degrees. You see a part of the rotated layout in the middle and large white borders on the left and right of the small window.

  • OddConfection

    That's a clever idea!

    I tried it (with browser orientation), and the result is sadly not what we would expect. The layout indeed rotate 90 degrees, but the window doesn't change size and doesn't rotate (I'm in letterbox scale fullscreen mode). So basically if you're holding your phone in portrait, you've got a small horizontal window in the middle , with the layout inside it rotated 90 degrees. You see a part of the rotated layout in the middle and large white borders on the left and right of the small window.

    that's because " Unbounded scrolling " is No. You can change it into Yes.

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)
Similar Topics Posts Views Last Post
Unread hot topic
0 Favourites
Rikoshe Mobile Game Jam
138 13,775
SorianS's avatar
SorianS
Unread hot topic
104 8,616
ArcadEd's avatar
ArcadEd
Unread hot topic
103 17,321
bon4ire's avatar
bon4ire