0 Favourites

Lock orientation, and hide web address bar mobile

  • 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?

    Thanks.

  • 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.

  • Construct 3

    Buy Construct 3

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

    Buy Now Construct 3 users don't see these ads
  • 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

    2.

    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 :

    <style>

    @media (orientation: landscape) {

    body {

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

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

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

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

    transform: rotate(-90deg);

    }

    }

    </style>

    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)
Similar Topics Posts Views Last Post
Unread hot topic
0 Favourites
Rikoshe Mobile Game Jam
138 13,782
SorianS's avatar
SorianS
Unread hot topic
104 8,619
ArcadEd's avatar
ArcadEd
Unread hot topic
103 17,326
bon4ire's avatar
bon4ire