如果用户在移动设备上，则更改网页内容答案

【问题标题】：Change web page content if user is on a mobile device如果用户在移动设备上，则更改网页内容
【发布时间】：2011-04-11 16:23:37
【问题描述】：

我在一个网站上有一个链接，它使用 jQuery 在弹出框中打开一个 iFrame。 jQuery 脚本仅将此函数应用于具有特定属性“id=calcPop”的链接，如下所示。

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

它适用于所有计算机，但在移动设备上非常有问题。有没有办法检测用户是否在移动设备上，然后将其更改为没有“id”属性？

【问题讨论】：

已经有很多答案了：stackoverflow.com/search?q=media+queries
感谢您的回复，我知道如何使用不同的 CSS 样式表来定位移动设备，但我正在尝试做的实际上是根据他们是否有移动设备来编辑页面中的 HTML 代码或不是。我仍然希望用户看到该链接，但如果他们在移动设备上，我不希望它具有 ID 属性。

标签： jquery html device-detection

【解决方案1】：

如果你不能使用像 PHP 这样的服务器端语言，那么只需使用 JS 删除 ID - 如果你有 jQuery，这样的东西就可以解决问题：

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

要检测您是否在移动设备上是相当复杂的，因为有很多移动设备。

你可以使用类似的东西：

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

要在 UA 中使用 Mobile 查找内容（将匹配 iPod/iPad/iPhone），不确定其他内容，您必须检查。

把它放在你的 document.ready 闭包中：

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>

【讨论】：

我尝试了上面的代码，但它似乎不适用于我的 iPhone。我可以在网站上使用 PHP，如果这样会更简单……我只是不是 PHP 编码器，所以不知道如何编码。