jqueryhtmldevice-detection

Change web page content if user is on a mobile device

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?

Solution

  • 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>