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

Question

我想在移动设备上使用特定的CSS规则来设置网站样式。我希望实现以下内容：

• 在电话号码上创建一个链接，并使其在移动设备上可点击
• 代码示例：<a href="tel:[phone]">[phone]</a> （类似于mailto:[e-mail]）
• 在普通电脑上单击此链接可能会产生一条错误消息，提示它们不知道tel协议。

我想使用CSS在非移动设备上隐藏具有链接的电话号码，并显示另一个元素的纯电话号码。 我可以使用media="handheld"选项，但是Android和iOS似乎会忽略它。 更喜欢干净的CSS方法，但如果需要JavaScript（或JQuery），也没有问题。

我的问题现在是关于这个tel-link，但我可能会在移动设备上使用相同的方法进行其他样式表更改。

- SPRBRN

---

你需要使用移动设备的某种框架，并希望它已经处理好了一些事情。如果从头开始支持每种类型将会很繁琐。 - Shamim Hafiz - MSFT

我不明白。CSS与电话号码链接有什么关系？你是想使用CSS仅在移动设备上应用样式到这些链接吗？ - BoltClock

CSS 无法创建链接。不是所有移动设备都支持 tel: 协议。而并非所有非移动设备都不支持 tel: 协议。 - Quentin

除了Quentin所说的之外，在不支持的浏览器中有链接有什么害处呢？它只是不起作用，会显示类似于“此浏览器不支持'tel'协议”的错误消息，这对我来说听起来更或多或少是可以理解的。 - Konrad Rudolph

你说得对，CSS不能创建链接，但它可以隐藏元素。因此，它可以隐藏a-tel元素，并显示另一个带有电话号码但没有链接的元素。 - SPRBRN

Answer 1

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

以下是代码示例：

$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!";
}
?>

我是和我的朋友一起完成的，如果您对我有任何建议或更正，请在评论中提出 :)

- Manuel

---

那是PHP，但这不是问题。 - SPRBRN

我在我的开发机上尝试了一下（使用Firefox 4的Ubuntu 11.04）。当我在浏览器中运行该代码时，返回值为1，这意味着我的桌面正在运行移动浏览器。 - SPRBRN

抱歉，代码出了问题；我确实得到了一个0，所以不是移动设备。 - SPRBRN

如果这对你有用，那太好了 :) 请标记为答案，以便其他人也可以找到它。 - Manuel

太棒了 :) 我只在Win7和Ubu上测试过。很高兴它在所有浏览器中都能正常工作 :) - Manuel

Answer 2

如果你只想使用“tel”选择href的话，可以使用css attr“starts with”选择器，像这样...

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

看这里的例子： http://jsfiddle.net/blowsie/gn9Ld/

- Blowsie

---

JSFiddle很酷！:-) 而且你的示例很清晰，尽管不完全符合我的需求，但我认为这不是一个大问题。 - SPRBRN

与我之前的评论不同，我现在意识到你的建议并不能解决我的问题（为移动浏览器使用特定样式表）。但它仍然有用，因为它帮助我意识到我可以只需向链接添加一个类，并将光标设置为箭头。这样，桌面浏览器就不会邀请用户单击它，而移动浏览器（不使用鼠标光标）仍然可以使用该链接。而我是使用你的方法与CSS条件还是添加一个类并不是真正重要的。 - SPRBRN

Answer 3

http://detectmobilebrowsers.com/

- Dirk Diggler

Answer 4

也许你可以使用 callto:

<a href="callto://[phone]">Call me at [phone]</a>

由于您正在开发移动设备，如果您还没有这样做，我认为您应该阅读一下CSS3 Media查询。

http://ubelly.com/2011/04/css3-media-queries-explained/?amp&amp

- DAEMYO

---

"callto"是Skype或VoIP特定的，还是没有区别？" - SPRBRN

我刚刚尝试使用超链接中的“callto”和“tel”，在我的Mac上（Google Chrome / Firefox）它尝试使用Skype进行呼叫，但在我的iPhone上（Safari）它的行为与使用“tel”完全相同。请注意，对于我来说，前缀必须是“callto：”而不是“callto：//”，因为后者在Firefox或Chrome中无法工作。 - BeesonBison