JQueryMobile+PhoneGap hints/hacks for Windows Phone 8.0/iOS/Android

[IE10] JQuery Mobile data-role=”footer” appears 50px too high

When porting a LOB (Line Of Business) JQueryMobile App to Windows Phone 8.0, an instant surprise was the standard data-role=”footer” div was 50px too high. Trying to adjust the padding, position or boundaries simply clipped it incorrectly. I haven’t yet tried to see if iScroll would help with this (a common suggestion).

Even with a device-width and device-height tag in the meta tag or explicitly in css, it didn’t position correctly, and scrollable lists would appear to overflow underneath it. I discovered that by setting the device width explicitly to 320px (The value which made the text look ok on the specific device), suddenly the footer snapped. Anyone know what’s going on, please tell me!

However this still left a 1px gap at the bottom (and 1px gap at the top when the phone was in landscape mode!). This can be further fixed by setting (in my case) the height to 534px. This had the unfortunate consequence that if the keyboard popped up, the view would zoom out to fit – not what an app needs.  Maybe conditionally setting the viewport based on text focus could get round this (hacks on-top of hacks). But there has to be a better way?

So, for now, this is my ‘hack’, until I discover more.

/* for ie 10 adjust the viewport, this appears to make the footer almost perfect in its position*/

@media screen and(orientation: portrait) {

@-ms-viewport {

width: 320px;

height: 534px; /*this fixes the footer 1px issue, however, keyboards will now cause the entire page to zoom out*/

user-zoom: fixed;

zoom:1;

} }

[IE10] Portrait mode is zoomed out too far

On my Nokia Lumia 920, the app didn’t look ‘appy’, so to make sure that the portrait mode isn’t zoomed out too much I also added another media query.

@media screen and(orientation: landscape) {

@-ms-viewport {

width: 540px; /* use media queries to be more intelligent */

user-zoom: fixed;

zoom:1;

} }

[IE10] Disable link highlighting

To make sure a big grey selection rectangle doesn’t slap its ugly face all over your work, add this to your <head>.

<meta name=”msapplication-tap-highlight” content=”no” />

[WebKit+IE10] Stop default link following/opening popups

Add this css to whereever you need it.

-webkit-touch-callout:none; /*stops link following in external browsers*/

-ms-user-select : none; /* ie 10.0 version */

[WebKit+IE10] Prevent selections except for within inputs.

Add the following CSS

*:not(input)

{

-webkit-user-select: none; /*stops selections – except for inputs*/

-ms-user-select : none; /* ie 10.0 version */

}

[WP8.0/IE10] Prevent full view bouncing once scrollable lists complete

It’s really, really frustrating. You want touch gestures and scrollable lists, but the default phonegap project structure makes the whole view bounce, and drag down/up when you hit limits. Bounce is acceptable within the non-fixed areas of your app, but the headers and footers need to keep in place.

This was fixed on iOS with DisableOverscroll or UIWebViewBounce settings in config.xml (can’t remember which one worked), but no such fix for WP8.0 as i can see it. If someone suggests -ms-touch-action :none, please please provide an example html and CSS that allows a ul to be scrolled in the way I’ve specified.

 

[All] Remove highlighting border from tick boxes when they have focus

div.ui-checkbox label.ui-focus {

box-shadow: none;

}

Advertisements

2 thoughts on “JQueryMobile+PhoneGap hints/hacks for Windows Phone 8.0/iOS/Android

  1. Hi …
    Your Blog Is Simply Super..
    Plz Provide Me Full Code For Empty Space Problem I’m New To Phonegap So Plz Help Me
    I Developing A Windows Phone 8 App Using Phone Gap. Empty Space Problem For My Project Also

  2. hi buddy, i’ve figured out an *acceptable* solution for WP8 bouncing issue, which you may find out here http://stackoverflow.com/questions/21652548/bouncing-when-overflow-set-to-auto-or-scroll-in-wp8-webbrowser-control
    but i am still stuck in the 1px empty gap bug. on my 1280×768 device, the gap seems to be at bottom when viewport width is 360, and at right when viewport is 320 (device-width). for me this bug is triggered by focusing a editable area, (input, textarea, *[contenteditable=true], etc.) the control seems to be trying to centering the cursor, and it’s somewhat misrendered.
    would like to know if you have a solution. 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s