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?

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?

• javascript
• html
• css
• responsive-design
• adaptive-design

Share Improve this question Follow edited May 23, 2013 at 22:39 Legako asked May 23, 2013 at 22:22 LegakoLegako 3311 gold badge22 silver badges88 bronze badges 1

• Don't do it on the client, do it at the server. Client side browser or device detection is unreliable and requires constant maintenance. – RobG Commented May 24, 2013 at 3:27

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Javascript/JQuery will work for you. Let's say you used the code from here to detect different mobile browsers: http://www.abeautifulsite/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.');
}

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

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

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