Get phone orientation but fix screen orientation to portrait

Question

I want to get the phone orientation but keep the screen orientation to portrait. So no matter the user turns the phone to landscape or portrait, the view stays the same, but

Answer 1

In case anybody is looking for a Webview/javascript solution to the question, the below can do that.

This will trigger custom 'flip' events on the window, with 'extra parameters' as jquery has them. It also sets window.flip, analogue to window.orientation:

$(window).on('flip',function(ev,angle,orientation) {
    console.log(angle,orientation);
    alert(window.flip);
});

---

if (window.DeviceOrientationEvent) {
    jQuery.flip = {
        debug       : false,
        interval    : 1000,
        checked     : false,
        betaflat    : 25,
        gammaflat   : 45,
        orientation : 'portrait-primary',
        angles      : {
            'portrait-primary'      : 0,
            'portrait-secondary'    : 0,
            'landscape-primary'     : 90,
            'landscape-secondary'   : -90       
        },
        timer       : null,
        check       : function(ev) {
            if (!this.checked) {
                var trigger=false;
                if (this.debug) console.log([ev.alpha,ev.beta,ev.gamma]);
                if (ev.beta>this.betaflat) {
                    // if beta is big its portrait
                    if (this.debug) console.log('beta portrait pri');
                    if (this.orientation!='portrait-primary') {
                        this.orientation='portrait-primary';
                        trigger=true;
                    }
                } else if (ev.beta<-this.betaflat) {
                    // if beta is big its portrait
                    if (this.debug) console.log('beta portrait sec');
                    if (this.orientation!='portrait-secondary') {
                        this.orientation='portrait-secondary';
                        trigger=true;
                    }
                } else if (ev.gamma>this.gammaflat) {

                    // else if gamma is big its landscape
                    if (this.debug) console.log('gamma landscape pri');
                    if (this.orientation!='landscape-primary') {
                        this.orientation='landscape-primary';
                        trigger=true;
                    }

                } else if (ev.gamma<-this.gammaflat) {

                    // else if gamma is big its landscape
                    if (this.debug) console.log('gamma landscape sec');
                    if (this.orientation!='landscape-secondary') {
                        this.orientation='landscape-secondary';
                        trigger=true;
                    }

                }
                if (trigger) {
                    if (this.debug) console.log('trigger flip');
                    window.flip = this.angles[this.orientation];
                    $(window).trigger('flip',[window.flip,this.orientation]);
                    this.checked=true;
                }
            }
        }
    }
    $(document).ready(function() {
        setInterval(function() {jQuery.flip.checked=false},jQuery.flip.interval);
        $(window).on('deviceorientation',function(ev) { jQuery.flip.check(ev.originalEvent) });
    });
} else {
    if (this.debug) console.log('DeviceOrientationEvent not supported');
}

The jquery is not really needed. I had it required anyway.