Using the Screens Full Height

This gap occurs because jQTouch does not realize we are running it outside of a normal web browser, so it's allowing room for the browser's toolbar. Fortunately, the fix is easy. Just open ~/Desktop/KiloGap/assets/www/kilo.js and add the following to the document ready function:

$('body > *').css({minHeight: window.innerHeight + 'px !important'});

This code uses the typeof operator to make sure the PhoneGap object has been defined. If the code is running inside PhoneGap, this conditional will evaluate to true. If the code is launched as a web app, the PhoneGap object will be undefined and the conditional will evaluate to false.

When the app is launched with PhoneGap, the immediate children of the HTML body element will be given a minimum height that matches the height of the window's content area (455px on emulator, 508px on the Nexus One). To make sure the declaration takes effect, add the iimportant directive to override any conflicting instructions elsewhere in the stylesheets. Now the app will completely fill the window when launched (Figure 7-14).

Figure 7-14. The body height has changed from 420px to 455px, so now the app takes up the whole screen
0 0

Post a comment