Some notes on this process in case they are useful to others:
Back button
Android specifically prohibits back buttons due to the presence of a physical Back button on all Android mobiles. However, in iOS, it’s the norm. JQuery mobile does provide an easy to insert header back button :
<a href="#" data-role="button" data-rel="back" data-icon="arrow-l">Back</a>
but it uses the JQuery theme. If you want to make it look like an iOS back button, this article makes it relatively easy.
Navigation
In Android,with Cordova, we have to use absolute URLs for navigation:
navigator.app.loadUrl("file:///android_asset/www/mypage.html");
In iOS, we can use the much simpler form:
location.href = "mypage.html";
Seemingly random clicks firing intermittently
It seems that using JQuery Mobile’s ‘vclick’ event in iOS can cause problems, although the same code was working fine in Android. I was seeing a page change, followed by another page change as if something in the first page loaded had been clicked. After trying all sorts of event undelegation and unbinding, I finally looked at JQuery’s vclick documentation. This explains that there is a slight delay between the JQuery’s ‘vclick’ event and the native ‘click’ event. When the content under the clicked point changes (as in this case with a new page load), the click event can actually fire on the changed rather than the original content. In situations like this, the recommendation is to use the ‘click’ rather than ‘vclick’ which solved the problem for me.
External pages
My app opens links to an external site for further information. In Android, simply specifying a full http:// prefix URL was enough to ensure that it loaded in the device’s normal web browser. In iOS, the default to seems to be to load it within the embedded brwoser which is being used to run your Cordova application, which is far from ideal. The workaround seems to simply add:
target = '_blank'
to all external links – they then fire up the iOS device’s Safari browser.