Detect iPad (or iOS) for just one href change

Question

I looked through a lot of posts and found a lot of scripts that redirect iOS devices to another page. But I do not want to change the whole page, just one link.

The whole site (www.example.com) works fine for iOS devices and includes one link to a flash-based application page (on another host, app.example.com). This particular application has an iOS version for use on the iPad. When the click is clicked, I just want computer users to go to the Flash application page, and iPad users to go to the page (at www.), Which tells them about the iOS application.

I imagine something like:

Use the iOS detection script in your head to set the isiPad variable to true if the user is on an iPad. Then in the body, something will function as:

if 'isiPad' = true, then

<a href="http://www.example.com/useiOSapp.html"> Run the App </a> 

otherwise

 <a href="http://app.example.com/flash-app-page.html">Run the App</a> 

Answer 1

Html

 <a id="myLink" href="">Run App</a> 

Javascript

 $(document).ready(function($){ var deviceAgent = navigator.userAgent.toLowerCase(); var agentID = deviceAgent.match(/(iphone|ipod|ipad)/); if (agentID) { $('#myLink').attr('href', 'http://example.com/useiOSapp.html'); }else { $('#myLink').attr('href', 'http://example.com/flash-app-page.html'); } }); 

Answer 2

You can run this via htaccess and rewrite the url.

 RewriteCond %{HTTP_USER_AGENT} ^.*iPad.*$ RewriteRule ^http://example.com/flash-app-page.html$ http://example.com/useiOSapp.html [R=301] 

Alternatively, you can declare this as js var:

 var isiPad = navigator.userAgent.match(/iPad/i) != null; 

and then on the finished call, a function that rewrites the url ... jquery version:

 $(document).ready(function(){ if(isiPad) { $('#link_id').attr('href', 'http://example.com/useiOSapp.html'); } }); 

(it is assumed that you also pass the ID ID_link link)