Determine hyperlink to use based on browser type in HTML

Question

I have a website which I have embedded lightview to bring up an iframe which has the Google Voice badge in it. This badge is flash based, so cannot be seen in iOS. In order to get a phone number to dial in iOS, it has to have a different format.

My question is how can I add logic to the HTML to know which type to choose based on the browser type (mobile vs normal)?

Full browser support:

Feel free to give me a <a class='lightview' data-lightview-type="iframe" href="pages/call.html" data-lightview-options="width: 230, height: 101">call</a>.

Mobile browser support:

Feel free to give me a <a href="tel:1-408-555-5555">call</a>.

Answer 1

You can try to detect if Flash is available instead of detecting browser.

You can dynamically bind an appropriate click event handler to all links having href attribute beginning from tel: if Flash is available by putting following code to a JS-script included in HEAD element of your HTML document:

if (FlashDetect.installed) {
    // $ means jQuery which is used to bind `click` event.
    $(document).on('click', 'A[href^="tel:"]', function() {
        // [Some specific code for Flash-enabled systems.]
    })
}