How to detect a mobile device in a web page

Question

For a website I want to use specific CSS rules for mobile devices. What I want is the following:

• create a link on a phone number, and make it clickable for mobile devices
• code example: <a href="tel:+1234567890">+1234567890</a> (similar to mailto:[email protected])
• Clicking this link on a normal computer will probably produce an error message saying that they don't know the tel-protocol.

I want to use CSS to hide the phone number with the link on non-mobile devices, and display another element with a plain phone number. I could use the media="handheld" option, but it seems Android and iOS ignore this. A clean CSS-method is preferred, but it's no problem if Javascript (or JQuery) is needed.

My question is now about this tel-link, but I probably will use the same method for other changes to the stylesheet for mobile devices.

Answer 1

This is what i use to check if the given request comes from a mobile device:

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

I made this with help of a mate of mine, if you have tips or corrections for me please give in comments:)

Answer 2

If you just want a selector for href's using "tel" you can use css attr "starts with" selectors, like so...

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

See my example here: http://jsfiddle.net/blowsie/gn9Ld/