jQuery Mobile lock orientation

Question

I am using phonegap and jquery mobile to build an app for an android phone. Is there a possibility to lock the orientation on one page? E.g. page "map" is loaded and the orientation is locked to "landscape" mode.

Answer 1

I have tried to modify manifest.xml and it works. Simply add android:screenOrientation="landscape" attribute to your activity tag like below:

<application android:icon="@drawable/ic_launcher" android:label="@string/app_name">
    <activity android:label="@string/app_name" android:name=".Phonegap_AppName"
        android:configChanges="orientation|keyboardHidden" android:screenOrientation="landscape">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
    </activity>
</application>

Answer 2

Not really i think. In xCode for iOS apps is it not possible. The only fix I can come up with, is to rotate your body or a wrapper acording to window.orientation

$(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 a risky way but thinks its the only way..

Hope this helps, please let me know !

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

---

Alternative you can bind to the 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 wrote this little script a while ago: It fix the multiply resize callback bug in iOS safari and the non-/late-/early-trigger(1) orientationchange bug in android.

(1) Sometimes it dosn't trigger sometimes before and some times after the browser has changes width + height? Wired!

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

If not iphone or ipad you are triggering the orientationchange event on the window.

So when you will bind any function the the resize you do it throw orientationchange.