Mobile detection - Meta tag and max-device-width vs. php user agent?

Question

Which form of mobile detection should I use and why?

<meta name="viewport" content="width=320,initial-scale=1,maximum-scale=1.0,user-scalable=no" />
<link media="only screen and (max-device-width: 480px) and (min-device-width: 320px)" href="css/mobile.css" type= "text/css" rel="stylesheet">
<link media="handheld, only screen and (max-device-width: 319px)" href="css/mobile_simple.css" type="text/css" rel="stylesheet" />

Or

include('mobile_device_detect.php');
$mobile = mobile_device_detect();

Answer 1

You are really looking at a couple different things here...

The html tags are telling the browser how to handle certain situations while the PHP script is detecting a mobile browser while the script is running on the server.

Each has it's own uses... in general, you'll probably end up using a combination of the two.

I usually detect mobile browsers using some server-side script, then output html tags (like the ones you listed) if a mobile browser has been detected.

In other words... 1) user requests a page 2) PHP (or whatever) detects a mobile browser or standard browser 3) if mobile, send the appropriate CSS files, headers, etc. Otherwise, send a different set of CSS files and headers.