Lock orientation, and hide web address bar mobile

0 favourites
  • 6 posts
From the Asset Store
Easily add web monetization to your game and start earning money from supporting visitors.
  • Hello,

    I have 2 questions:

    1. How do I lock orientation.I want the game to be played only in portrait?

    Now if I select on construct configuration settings portrait only, the when the device is orientated on landscape the game can be played (it resize and rotate)

    2. How do i hide the mobile address bar?


  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads
  • 1. Not many browsers support orientation locking from web pages, but you can set this in project properties in the latest builds.

    2. The best way is to use the Browser object's 'Request fullscreen' action. Again not all browsers support this, but it's the most reliable and future proof way to do it.

  • 0. I hate this forum, You lose what you type after system resuming from hibernation.

    1. I found a solution by pauseing the game and set a ui text


    System trigger once -> browser request full screen -> letterbox stretch

    tested on safari ipad, opera, firefox,chrome on android tablet full screen

    didn't work not even on any

  • There are quite a few css/html/javascript tricks to get certain desired results. but they are outside of construct 2, straight in the index.html file.

    I believe a very comon one is getting your user to make a link on their device home screen. That should make your web app an app like style concerning screensize and adresss bar.

    For the adress bar, there are tons of approaches, from having a scroll up event, to some zooming action.

    There are also various browser specific settings to hiding the bar.

    You could simply apply all :) or have some browser detection going to determine which to enable...

    For the view modes there are options so you detect current orientation, and then perform some action, like, from blocking the entire view and showing a text that the user needs to rotate the screen, or rotate the screen yourself if its in the wrong position, near effectively giving a lock function ...

    A quick search got me :


    (orientation: landscape) {

    body {

    -webkit-transform: rotate(-90deg);

    -moz-transform: rotate(-90deg);

    -o-transform: rotate(-90deg);

    -ms-transform: rotate(-90deg);

    transform: rotate(-90deg);




    just add that in the head of the index.html file.

    instead of rotate, you could have a black div cover the entire screen, with some white text in the middle mentioning to rotate.

    Its not perfect, but its a start ;)


  • For full screen it seams that in android it works only on Chrome but the full screen request has to be triggered by a touch.

    On Ios:

    check: h**tp://stackoverflow.com/questions/18793072/impossible-to-hide-navigation-bars-in-safari-ios-7-for-iphone-ipod-touch

    It seams that there is no way but to add the app to homescreen or wait for a new beta ios release.

  • Yes the trick with using browser - set full screen is that it has to be initialed by a "on touch start" command.

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)