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.