Changing links based on mobile device

javascript html css responsive-design adaptive-design
user2344015 picture user2344015 · May 24, 2013 · Viewed 7.2k times · Source

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

ChrisLTD picture ChrisLTD · May 24, 2013

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');
}

Related questions

Height equal to dynamic width (CSS fluid layout)

Is it possible to set same height as width (ratio 1:1)? Example +----------+ | body | | 1:3 | | | | +------+ | | | div | | | | 1:1 | | | +------+ | | | | | | | | | | | +----------+ CSS div { width: 80%; height: same-as-width }

Read More
Bootstrap v2 Dropdown Navigation not working on Mobile Browsers

I am having an issue with the Bootstrap menu dropdowns on mobile devices (Bootstrap 2). A similar question was asked here with dropdown buttons, however the answer for that was an inherent bug within bootstrap which was solved in an update. …

Read More
CSS: Keeping a div's height relative to its width

My question is very similar to this question: CSS: 100% width or height while keeping aspect ratio? I have a div whose position is fixed. The width of the div must be 100% and its height exactly 1/6th of its width. Is …

Read More