Изменить содержимое веб-страницы, если пользователь находится на мобильном устройстве

Question

У меня есть ссылка на веб-сайт, который открывает iFrame во всплывающем окне с помощью jQuery. Сценарий jQuery применяет эту функцию только к ссылке, которая имеет определенный атрибут id = calcPop, как вы можете видеть здесь ниже.

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

Он отлично работает на всех компьютерах, но очень глючит на мобильных устройствах. Есть ли способ определить, находится ли пользователь на мобильном устройстве, а затем изменить его, чтобы он не имел атрибута id?

Answer 1

Если вы не можете использовать серверный язык, такой как PHP, просто удалите идентификатор с помощью JS - если у вас есть jQuery, что-то вроде этого поможет:

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

Чтобы определить, используете ли вы мобильное устройство, достаточно много мобильных устройств.

Вы можете использовать что-то вроде:

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

Чтобы найти вещи с Mobile в UA (которые будут соответствовать iPod/iPad/iPhone), не уверенный в других, вам придется проверить.

Собираем это вместе, в вашем документе. Уже закрытие:

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

В PHP вы можете сделать что-то вроде:

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

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

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