I am developing a mobile web (jquery 1.7.1 and jquery mobile 1.1.0) application with a splash screen that encourages visitors to download the app. There is a badge that says "Available on the App Store" if the user agent is an iOS browser, "Available in Google Play" if they're on an Android browser...you get the idea.
I am testing this in Chrome using developer tools to spoof the user agent, so I can test all the modes without needing actual devices. When I'm in any mode except iOS everything works as expected. Here's what I've observed in iOS user agent mode:
1) When the page loads, if I inspect the element with the link, everything looks fine:
<a id="appleStoreLink" href="https://itunes.apple.com/us/app/idXXXXXXXXX" class="ui-link">
<img class="storeBadgeImage" src="/images/App_Store_Badge.png" alt="iTunes download link">
</a>
2) When I click the badge link, nothing happens. And look at what happens to my href (again I am seeing this by doing Inspect Element in chrome:
<a id="appleStoreLink" href="#" class="ui-link">
<img class="storeBadgeImage" src="/images/App_Store_Badge.png" alt="iTunes download link">
</a>
My version of Chrome is 23.0.1271.97 for Windows.