Changing links based on mobile device

Question

I have an HTML img tag with a static HTML link.

My idea is to dynamically change that link (but not the image) based on what type of device my user is connecting from. The major types of devices I am concerned with are PC, Google/Andriod, Ios, Amazon/Andriod.

Is there an HTML/CSS/Javascript solution to this, or is php/dom/server side the only options?

Answer 1

Javascript/JQuery will work for you. Let's say you used the code from here to detect different mobile browsers: http://www.abeautifulsite.net/blog/2011/11/detecting-mobile-devices-with-javascript/

Then you could write something like this:

if( isMobile.iOS() || isMobile.Android() ){
    $('a#mylink').attr('href', 'http://newlink.com');
}

Answer 2

You might consider using CSS media queries for device sizes: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

OR you could use some sort of server-side detection library such as: https://code.google.com/p/php-mobile-detect/

OR you could use javascript: What is the best way to detect a mobile device in jQuery?