Windows Phone 8 - Phonegap + JQM unknown space at bottom of app

Question

I am using phonegap to try and port an app to Windows Phone 8 and am using JQM. I honestly don't think JQM has anything to do with this, but I think it's more with my app configuration.

The issue:

It looks like the view thinks there is an app bar at the bottom of the screen, and anything that requires calculations based on the screen size is occuring from about 35 pixels or so up. Do I need to specify that this app doesn't have an app bar? If I adjust the calculation, the content gets cut off, like it's going off a browser port.

Here is a screen of the behavior (I'm not sure if it'll show or not...): https://lh3.googleusercontent.com/-HO2kvP0umzI/URz-QSyxnUI/AAAAAAAAAAc/gsDJ-yr7RCA/s512/wp_ss_20130213_0001.jpg

Let me know if that screen doesn't show. The same HTML/CSS/JS looks fine in iOS and Android, so it's gotta be something with the WP-Phonegap config. If it matters, I'm using the phonegap 2.4.0 starter template to get the app running...

Thanks.

Check out http://stackoverflow.com/questions/13028349/incorrect-page-height-in-jquery-mobile/ — Sergei Grebnov, Feb 15 '13 at 14:50
You can also try Weinre to see layout details http://sgrebnov.blogspot.ru/2012/12/debugging-cordova-apps-on-wp8.html — Sergei Grebnov, Feb 15 '13 at 15:05
I'm going to try the methods described in that link and get back here... Thanks for that. I didn't realize it was a known issue. — gabaum10, Feb 18 '13 at 20:35

score 4 · Accepted Answer · edited May 23 '17 at 12:28

So the solution here did the trick:

Incorrect page height in jQuery Mobile

I just added this to my CSS:

@media screen and (orientation: portrait) {
    @-ms-viewport {
       width: 320px;
       user-zoom: fixed;
       max-zoom: 1;
       min-zoom: 1;
    }
}

@media screen and (orientation: landscape) {
@-ms-viewport {
    width: 480px;
       user-zoom: fixed;
       max-zoom: 1;
       min-zoom: 1;
    }
}

Windows Phone 8 - Phonegap + JQM unknown space at bottom of app

1 Answers1