Jump to content

Responding to Orientation Changes


Recommended Posts

Hi, I am creating my first game for the web (I created for android with CocoonJS) and I find the problem of the orientation of the device, my game is in landscape mode, and I watched that "there can be locked to a single perspective "you should listen and react to the event, but really do not know how to implement it, and try cSS, someone has a method that works (please, no phaser) only JS.



Link to comment
Share on other sites

You can't lock orientation from the browser, this is certainly true of iOS and I'm pretty sure its the same for Android.

You can query the orientation, and you can respond to orientationChange events but you cant stop it, infact, I think you can only respond to orientation change events after they have already occurred (I can't remember exactly, pretty sure the only event fired tells you an orientation has occurred, whereby the OS is already rotating the screen).

Link to comment
Share on other sites

You can lockOrientation on Android Chrome, Firefox, Opera but not on stock browsers <v537 (pre Chrome).  iOS not so much / longish story.  Windows I can not confirm but I see some supporting evidence that the feature exists.  There are various vendor specific implementations needed to do all this, and the UI messages presented aren't ideal.  Like many things HTML5 game related: see it as a nice-to-have and don't rely on it.  Same is true of Events, often better to poll innerWidth and innerHeight periodically.

Example: http://b10b.com/firefighterpinball/

Link to comment
Share on other sites

ok, thank you many thanks, it worked out well:


window.addEventListener("resize", function() {
}, false);

    console.log("angulo de disp "+screen.orientation.angle);
    console.log("ancho de pantalla "+window.innerWidth);
    console.log("alto de pantalla "+window.innerHeight);
    console.log("--------------- ");
    mql = window.matchMedia("(orientation: portrait)");

    // If there are matches, we're in portrait
        //on mobile devices
        if(mql.matches) {  
        // Portrait orientation
            this.escenas[this.escenaActiva].bloqueado=true;//flag to show change direction
        } else {  
        // Landscape orientation
            this.escenas[this.escenaActiva].bloqueado=false;//flag to show change direction



Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...