Phonegap/HTML5 and Android screen resize issue on rotate from landscape to portrait

Question

I'm experiencing an odd problem with an android phonegap application right now when the user rotates from landscape to portrait, but not the other way around.

When the screen is rotated from landscape to portait, the height of the content viewport seems to remain at the previous height - however the width of the viewport resizes correctly. The following images try to show this a little clearer:

rotates to

I saw this question: Android Screen Orientation: Landscape Back to Portrait ...but while the accepted answer may true, I'm not entirely sure what is being asked for there.

I only have a layout/main.xml that carries the default configuration:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<TextView  
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:text="@string/hello"
    />
</LinearLayout>

I have also tried putting in some orientation detection scripting to see if that helps - I've tried:

    var viewPortHeight = $(window).height();
alert (viewPortHeight+" x "+$(window).width());
var headerHeight = $('div[data-role="header"]').height();
var footerHeight = 0;
var contentHeight = viewPortHeight - headerHeight - footerHeight;

// Set all pages with class="page-content" to be at least contentHeight
$('div[class="page-content"]').css({'min-height': contentHeight + 'px'});

and also

                var devInfo = new DeviceInformation();
            devInfo.setOrientation(0);
            time_column_count = Math.floor(viewport.height / 270);
            devInfo.setResolution({
                height  : $(window).width(),
                width : $(window).height()
            });

but - no dice. Any ideas here?

UPDATE

This only seems to be a problem on ICS devices - and there is actually a scrolling problem in landscape mode on devices that are experiencing this issue. JQM Scroll is being used to enable scrolling on the different divs.

Answer 1

I had a similar issue with phonegap a while back. The code below should hopefully help you solve this issue.

1 - Make sure that the phonegap.js file is being called within the head of the html file

2 - Add the following meta tag within the head of the html page

<meta name="viewport" content="width=device-width, initial-scale=1"> 

3 - Add an event listener in the onDeviceReady()

<script type="text/javascript">
function onDeviceReady() 
{
    document.addEventListener("orientationChanged", updateOrientation);
}
</script>

4 - If you want to add specific changes to differnet orientations, possibly different images, use a similar switch statement

function updateOrientation()
{
    var e = window.orientation;
    switch(e)
    {  
        case 0:
            // PORTRAIT
        break;

        case -90:
            // LANDSCAPE
        break;

        case 90:
            // LANDSCAPE
        break;

        default:
            //PORTRAIT
        break;
    }        
}

5 - Add the following style after your closing javascript tag

<style>
    [data-role=page]{height: 100% !important; position:relative !important; top:0 !important;}
</style>

Please try the above and let me know if it work, if not there are a few other approaches you could take.

Thanks, L & L Partners