Javascript 如何在网页中检测移动设备

对于一个网站，我想为移动设备使用特定的CSS规则。我想要的是：

• 在电话号码上创建链接，并使其可用于移动设备
• 代码示例：
  （类似于mailto:john@hotmail.com)
• 在普通计算机上单击此链接可能会产生一条错误消息，表示他们不知道tel协议

我想使用CSS在非移动设备上隐藏带有链接的电话号码，并显示另一个带有普通电话号码的元素。我可以使用media=“掌上电脑”选项，但安卓和iOS似乎忽略了这一点。首选干净的CSS方法，但如果需要Javascript（或JQuery），则不会有问题

---

我现在的问题是关于这个电话链接，但是对于移动设备样式表的其他更改，我可能会使用相同的方法

这是我用来检查给定请求是否来自移动设备的：

$mobile_browser = '0';

if (preg_match('/(up.browser|up.link|mmp|symbian|smartphone|midp|wap|phone|android)/i', strtolower($_SERVER['HTTP_USER_AGENT']))) {
    $mobile_browser++;
}

if ((strpos(strtolower($_SERVER['HTTP_ACCEPT']),'application/vnd.wap.xhtml+xml') > 0) or ((isset($_SERVER['HTTP_X_WAP_PROFILE']) or isset($_SERVER['HTTP_PROFILE'])))) {
    $mobile_browser++;
}    

$mobile_ua = strtolower(substr($_SERVER['HTTP_USER_AGENT'], 0, 4));
$mobile_agents = array(
    'w3c ','acs-','alav','alca','amoi','audi','avan','benq','bird','blac',
    'blaz','brew','cell','cldc','cmd-','dang','doco','eric','hipt','inno',
    'ipaq','java','jigs','kddi','keji','leno','lg-c','lg-d','lg-g','lge-',
    'maui','maxo','midp','mits','mmef','mobi','mot-','moto','mwbp','nec-',
    'newt','noki','oper','palm','pana','pant','phil','play','port','prox',
    'qwap','sage','sams','sany','sch-','sec-','send','seri','sgh-','shar',
    'sie-','siem','smal','smar','sony','sph-','symb','t-mo','teli','tim-',
    'tosh','tsm-','upg1','upsi','vk-v','voda','wap-','wapa','wapi','wapp',
    'wapr','webc','winw','winw','xda ','xda-');

if (in_array($mobile_ua,$mobile_agents)) {
    $mobile_browser++;
}

if (strpos(strtolower($_SERVER['HTTP_USER_AGENT']),'windows') > 0) {
    $mobile_browser = 0;
}

if (strpos(strtolower($_SERVER['HTTP_USER_AGENT']),'mac') > 0) {
        $mobile_browser = 0;
}

if (strpos(strtolower($_SERVER['HTTP_USER_AGENT']),'ios') > 0) {
        $mobile_browser = 1;
}
if (strpos(strtolower($_SERVER['HTTP_USER_AGENT']),'android') > 0) {
        $mobile_browser = 1;
}

if($mobile_browser == 0)
{
    //its not a mobile browser
    echo"You are not a mobile browser";
} else {
    //its a mobile browser
    echo"You are a mobile browser!";
}
?>

---

我是在我的一位同事的帮助下做这件事的，如果你有什么建议或更正，请发表评论：）

也许你可以使用callto：

<a href="callto://+112345767890">Call me at +112345767890</a>

由于您是为移动设备开发的，我认为您应该了解CSS3媒体查询，如果您还没有这样做的话

---

如果您只想为href的使用“tel”的选择器，您可以使用css attr“以”选择器开始，如下所示

a[href^="tel"] { color: red; }

请参见我的示例：

---

您需要为移动设备使用某种框架，并希望它能够解决问题。从零开始自己支持每种类型可能会有点详尽。我不明白。CSS与电话号码链接有什么关系？你的意思是你只想在移动设备上使用CSS将样式应用于这些链接吗？你不能使用CSS创建链接。并非所有移动设备都支持电话：方案。并非所有非移动设备都不支持tel:scheme。除了昆汀所说的，在不支持的浏览器中使用链接有什么害处？它根本不起作用，错误消息类似于“此浏览器不支持'tel'协议”，这听起来或多或少让我明白。你是对的，CSS不能创建链接，但它可以隐藏元素。因此它可以隐藏a-tel-element，并显示另一个带有电话号码但没有链接的元素。JSFiddle很酷！：-）你的例子很清楚，虽然不完全是我需要的，但我认为这不是一个大问题。与我之前的评论不同，我现在意识到你的建议并不能解决我的问题（使用移动浏览器的特定样式表）。尽管如此，它还是很有用的，因为它帮助我认识到，我可以向链接添加一个类，并将光标设置为arrow。这样，桌面浏览器就不会邀请用户点击它，而移动浏览器（不使用鼠标光标）仍然可以使用该链接。无论我是使用css条件还是添加类，对我来说都不是那么重要。这是PHP，但这不是问题。我在我的开发机器上尝试过它（Ubuntu11.04和Firefox4）。当我在浏览器中运行该代码时，返回1，这意味着我的桌面运行的是移动浏览器；我有一个0，所以不是手机。如果它对你有用，那很好：）请标记为答案，这样其他人也可以找到它。在XP/Firefox、XP/IE6、Ubu/Chrome、Ubu/FF4、Android、Wine/Safari和Wine/IE7上测试过它，而且一切都正常工作。callto skype或voip是特定的还是没有区别？我刚刚尝试在超链接和Mac（谷歌Chrome/Firefox）上使用“callto”和“tel”，它尝试使用skype进行呼叫，但在我的iPhone（Safari）上，它的行为与使用“tel”完全相同。请注意，对我来说，前缀必须是“callto:”而不是“callto://”，因为后者在Firefox或Chrome中不起作用。