Quick Mobile Device Detections

Quick Mobile Device Detections

Posted on: Friday, January 20th 2012 by Justin Tsang

Here are a few ways to detect if the user is coming from a mobile device. Used for redirection, different interfaces, or special cases.

Javascript:

PROS: Most common solution.
CONS: Many mobile devices don't support Javascript or users turn it off.

<script>
  var isMobile = navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/);
</script>

Use CSS @media handheld or screensize

PRO: Way to display certain CSS styles for mobile devices.
CON: Many Cellphones don't support the handheld media type, they display their pages with the screen media type by mistake.

<style>
  @media handheld{ .icon { display: none; } }

  @media only screen and (max-width: 999px) {
    /* rules that only apply for canvases narrower than 1000px */
  }

  @media only screen and (device-width: 768px) and (orientation: landscape) {
    /* rules for iPad in landscape orientation */
  }

Use PHP or your coding language of choice

PROS: Does not rely on script language or CSS being supported by phone.
CON: Lots and lots of other potential user-agents that are used by mobile devices may popup in the future. The code will catch some of them but not all later on.

There is a Google project that shows the specific code which is downloadable here: http://code.google.com/p/php-mobile-detect/

$is_mobile = $detect->isMobile();

WURFL (Wireless Universal Resource File)

The last resort is WURFL which is a software component which contains the descriptions of thousands of mobile devices. It is basically an XML configuration file plus a set of progamming APIs to access the data. For more documentation on how to implement it please read:
http://wurfl.sourceforge.net/help_doc.php