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”
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:
-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