Removing the tell-tale signs that your iPad/iPhone PhoneGap app is written in HTML

When you build an app with HTML and PhoneGap there are always some tell-tale signs of how you’ve built it. These signs range from the obvious (the view port bouncing when you pull down on the screen) to the not so obvious (a login text field always capitalises the first letter).

In this post, I’ll highlight some of tell-tale signs I’ve come across and the solutions I’ve found to remove them or hide them. Hopefully this will help you reach that holy grail of “looking native”.

View port bounce

Preventing the view port from bouncing is easy. Whilst you can use an event listener to prevent the default action on touchstart, this may cause you headaches later on in building your app. Fortunately there is an option in Xcode.

In your PhoneGap Xcode project, under supporting files, there is a file called Cordova.plist. Look for an option called “UIWebViewBounce” and set this to “No”

Copy/paste callout

You might think this is where you use JavaScript to adjust the default behaviour, you can try all you like but I don’t think you’ll have much success. Instead use this piece of CSS:
body {
-webkit-touch-callout: none;
-webkit-user-select: none;
}

Telephone numbers highlighting

Sometimes you might want the telephone numbers to highlight, but I’ve found that the highlighting will match all sorts of number combinations. To prevent this from happening just include the following HTML in the head of any HTML files you are using:
<meta name="format-detection" content="telephone=no">

The form input for a login capitalises the first letter

This can be really annoying for users, but it’s another simple one to fix, just include the word “login” as part of the action attribute on your form eg action=”#login”
<form action="#login"><!-- Your form code here --></form>

Elements highlighting when tapped

This is another tell-tale that is fixed with CSS. Just use the following on the body element:
body {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

Keyboard form helpers

This one is a bit out of my league, as it involves venturing into the work of Objective-C. But the solution works quite well, and I’ve used it in 2 professional projects. To take you through the solution I’ll refer you on to a post by Josh Garnham at iOS-Blog