1

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?

user2344015
  • 23
  • 2
  • 7
  • 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 May 24 '13 at 03:27

2 Answers2

3

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');
}
ChrisLTD
  • 403
  • 1
  • 4
  • 13
  • And if someone uses Windows, Symbian or Linux based device? – RobG May 24 '13 at 03:28
  • The code I linked to will detect Android, Blackberry, iOS, Windows Phone, and Opera. If you need to detect other user agent strings, adding a new function is trivial. Or alternatively, find another library that handles all the browser you want to detect. – ChrisLTD May 24 '13 at 14:03
  • There are thousands (literally) of [user agent strings](http://www.useragentstring.com/pages/useragentstring.php), using it to detect devices means you will be on a never ending treadmill of frequent updates. – RobG May 24 '13 at 15:00
  • I don't disagree, but the OP wants to detect user agents, and maybe has a good reason for it. – ChrisLTD May 26 '13 at 21:46
  • @chriltd—the OP says to modify the appearance of a link based on the type of device. That doesn't seem like a good idea, far better to test for capability (such as screen size) and base logic on that. Depending on 4,000 lines of jQuery just to do a bit of UA string sniffing seems unreasonable. – RobG May 26 '13 at 22:28
1

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?

Community
  • 1
  • 1
Simon
  • 1,759
  • 3
  • 20
  • 28