Change web page content if user is on a mobile device

Question

I have a link on a website that opens an iFrame in a popup box using jQuery. The jQuery script applies this function only to the link that has the specific attribute 'id=calcPop' as you can see here below.

<a href="calculator.html" id="calcPop">Click here</a>

It works great on all computers, but is very buggy on mobile devices. Is there a way to detect if a user is on a mobile device and then change that to not have an 'id' attribute?

Answer 1

If you can't use a serverside language like PHP, then just remove the ID using JS – if you have jQuery, something like this will do the trick:

$("#calcPop").attr("id", "");

To detect whether you are on a mobile device is fairly involved as there are lots of mobile devices.

You could use something like:

var isMobile = navigator.userAgent.match(/Mobile/i) != null;

To find things with Mobile in the UA (that will match iPod/iPad/iPhone), not sure about others, you'd have to check.

Putting it together, in your document.ready closure:

var isMobile = navigator.userAgent.match(/Mobile/i) != null;
if (isMobile) {
    $("#calcPop").attr("id", "");
}

In PHP you could do something like:

<?php
$isMobile = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'Mobile');

if ($isMobile) {
    $id = "calcPop";
} else {
    $id = "";
}
?>

<a href="calculator.html" id="<?= $id ?>">Click here</a>