Geek Answers Handbook

Telephone communications. Rotation prevention when auto-orientation is on?

I am rewriting someone else's question that I found on Google Groups, I have the same problem:

I have an application that requires everything to be in Portrait, except when it plays the video. On iOS, when the video is transferred to the Quicktime player, I want the video to play in landscape mode. Currently, the video is played only in the portrait, as it seems to inherit the portrait - only from the phonegap application. My solution might be to change Phonegap.plist to auto-rotate, but then I want to be able to use javascript to look for rotation changes and prevent them on every page of the application except video playback. Is it possible? Is there any other way to force landscape orientation only for a specific application page? Thank!

I tried the following with automatically turning on rotation without success:

$(document).ready(function(){
  document.addEventListener('orientationchange', function(e) { e.preventDefault(); }, false);
});
+5
source share
1 answer
$(window).bind("orientationchange", function(){
    var orientation = window.orientation;
    var new_orientation = (orientation) ? 0 : 180 + orientation;
    $('body').css({
        "-webkit-transform": "rotate(" + new_orientation + "deg)"
    });
});

This is risky, but thinks this is the only way.

An alternative that you can bind to a window resize event.

$(window).bind("resize", function(){
    var orientation = window.orientation;
    var new_orientation = (orientation) ? 0 : 180 + orientation;
    $('body').css({
        "-webkit-transform": "rotate(" + new_orientation + "deg)"
    });
});

I recently wrote this little script: I fixed a multiply error with resizing on iOS safari and a change / one-trigger (1) changeroid error in android.

(1) Sometimes it does not start sometimes before and several times after the browser changes the width + height? Wired!

if (!(/iphone|ipad/gi).test(navigator.appVersion)) {
    $(window).unbind("resize").bind("resize", function() {
        $(window).trigger("orientationchange");
    });
}

If you are not an iphone or ipad, you raise the changechange event in the window.

Therefore, when you bind any function, change its size, change the orientation.

: http://jsfiddle.net/aalouv/sABRQ/1/

+2

More articles:


All Articles