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

Question

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

• 在电话号码上创建一个链接，并使其可在移动设备上点击
• 代码示例：<a href="tel:+1234567890">+1234567890</a>（类似于mailto:john@hotmail.com）
• 在普通计算机上单击此链接可能会产生一条错误消息，指出他们不知道电话协议。

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

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

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

我是在我的一个伙伴的帮助下完成的，如果您对我有任何建议或更正，请在 cmets 中提供:)

Answer 2

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

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

在此处查看我的示例： http://jsfiddle.net/blowsie/gn9Ld/

Answer 3

http://detectmobilebrowsers.com/

Answer 4

也许你可以使用 callto：

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

由于您正在为移动设备开发，我认为如果您还没有阅读 CSS3 媒体查询，那么您应该阅读一下。

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