Responding to Orientation Changes

[none-9999]

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.

 

 

[mattstyles]

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

[b10b]

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/

[none-9999]

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

 

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



Juego.prototype.pantalla=function(){
    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
    
    if(app){
        //on mobile devices
                
        if(mql.matches) {  
        // Portrait orientation
            console.log("port");
            this.scaleY=(512/window.innerWidth);
            this.scaleX=(800/window.innerHeight);
            this.escenas[this.escenaActiva].bloqueado=true;//flag to show change direction
        } else {  
        // Landscape orientation
            console.log("lands");
            this.scaleX=(800/window.innerWidth);
            this.scaleY=(510/window.innerHeight);
            this.escenas[this.escenaActiva].bloqueado=false;//flag to show change direction
        }
        
    }else{
        this.scaleX=1;
        this.scaleY=1;
    }
    


    miJuego.enableInputs();
}