$(window).height() false value on iOS 5.1 PhoneGap 1.7 jquery mobile when launching the app in landscape mode

问题

If if launch the application holding the iPhone in portrait mode, everything works fine even when i rotate the iPhone everything still working good. But when i launch my app holding the iPhone in landscape mode this does not work good on my first rotation after landscape launch, it ruins my design completely. This is the sequence of var viewport = $(window).height values:

Launching Portrait:

Launch: $(window).height() = 460px / $(window).width() = 320px;
Rotate Landscape left: $(window).height() = 300px / $(window).width() = 480px;
Rotate to portrait: $(window).height() = 460px / $(window).width() = 320px;

..... So this is working fine

Launching Landscape:

Launch landscape left: $(window).height() = 300px / $(window).width() = 480px;
Rotate portrait: $(window).height() = 300px / $(window).width() = 480px; This should be: $(window).height() = 460px / $(window).width() = 320px;
Rotate landscape left: $(window).height() = 460px / $(window).width() = 320px; This should be: $(window).height() = 300px / $(window).width() = 480px;
Rotate portrait: $(window).height() = 300px / $(window).width() = 480px; This should be: $(window).height() = 460px / $(window).width() = 320px;
Rotate landscape left: $(window).height() = 460px / $(window).width() = 320px; This should be: $(window).height() = 300px / $(window).width() = 480px;

..... So this is ruined completely because of the first rotate action that didn't changed its values and now portrait design is on landscape and vice-versa.

function onBodyLoad() {
        document.addEventListener("deviceready", onDeviceReady, false);

        $(window).bind('orientationchange', function () {
            if ($.mobile.activePage.attr("id") == "FirstPage") {       
                window.setTimeout(function () {

                    alert($(window).height() + " " + $(window).width());

                }, 250);
            }
        });
}

Thank you for helping but please note that the same code is working very good on android devices.

回答1:

Phonegap is on version 2.2 now. Upgrade to the latest version, which includes many fixes for rotation and orientation. See the phonegap website for more information.

来源：https://stackoverflow.com/questions/13973733/window-height-false-value-on-ios-5-1-phonegap-1-7-jquery-mobile-when-launch

标签

ios

cordova

jquery-mobile