I am creating a phonegap application for various mobile platforms and I was wondering what is a current best solution of browser/mobile phone detection?
Should I go with a server or a client side detection or could I use css solution through a media types screen width?
I am creating a phonegap application for various mobile platforms and I was wondering what is a current best solution of browser/mobile phone detection?
Should I go with a server or a client side detection or could I use css solution through a media types screen width?
Share Improve this question edited Mar 25, 2013 at 20:58 Gajotres 57.3k16 gold badges105 silver badges131 bronze badges asked Feb 24, 2013 at 18:49 user2105145user2105145 631 silver badge4 bronze badges3 Answers
Reset to default 16Changes:
- 06.03.2013 - Addad a few ments inside a WURFL chapter
Intro :
There are few available solutions but I will only name open-source ones, at least solutions mostly used with a jQuery/jQuery Mobile. Also be warned, this topic has the potential to start a war. On one side we have a proponents of server side detection with their munity maintained databases and on the other side we have client side advocates with their browser sniffing.
Server side:
WURFL -
Created in 2002, WURFL (Wireless Universal Resource FiLe), is a popular open-source framework to solve the device-fragmentation problem for mobile Web developers and other stakeholders in the mobile ecosystem. WURFL has been and still is the de facto standard device-description repository adopted by mobile developers. WURFL is open source (AGPL v3) and a trademark of ScientiaMobile.
Good :
Very detailed detection, you would probably get more data then is really needed.
Good platform support, api's are available for Java, PHP and .Net.
Bad :
Not always up to date, heavy dependency on munity
In case of iPhone there's no way of knowing an iOS version, so media type queries to detect pixel ratios.
Fee only for a non mercial usage, older version are still free for mercial usage but they can only use database updated up to WURFL EULA changes.
- It can be found here: http://wurfl.sourceforge/apis.php
PHP example :
<?php
// Include the configuration file
include_once './inc/wurfl_config_standard.php';
$wurflInfo = $wurflManager->getWURFLInfo();
if (isset($_GET['ua']) && trim($_GET['ua'])) {
$ua = $_GET['ua'];
$requestingDevice = $wurflManager->getDeviceForUserAgent($_GET['ua']);
} else {
$ua = $_SERVER['HTTP_USER_AGENT'];
// This line detects the visiting device by looking at its HTTP Request ($_SERVER)
$requestingDevice = $wurflManager->getDeviceForHttpRequest($_SERVER);
}
?>
<html>
<head>
<title>WURFL PHP API Example</title>
</head>
<body>
<h3>WURFL XML INFO</h3>
<ul>
<li><h4>VERSION: <?php echo $wurflInfo->version; ?> </h4></li>
</ul>
<div id="content">
User Agent: <b> <?php echo htmlspecialchars($ua); ?> </b>
<ul>
<li>ID: <?php echo $requestingDevice->id; ?> </li>
<li>Brand Name: <?php echo $requestingDevice->getCapability('brand_name'); ?> </li>
<li>Model Name: <?php echo $requestingDevice->getCapability('model_name'); ?> </li>
<li>Marketing Name: <?php echo $requestingDevice->getCapability('marketing_name'); ?> </li>
<li>Preferred Markup: <?php echo $requestingDevice->getCapability('preferred_markup'); ?> </li>
<li>Resolution Width: <?php echo $requestingDevice->getCapability('resolution_width'); ?> </li>
<li>Resolution Height: <?php echo $requestingDevice->getCapability('resolution_height'); ?> </li>
</ul>
<p><b>Query WURFL by providing the user agent:</b></p>
<form method="get" action="index.php">
<div>User Agent: <input type="text" name="ua" size="100" value="<?php echo isset($_GET['ua'])? htmlspecialchars($_GET['ua']): ''; ?>" />
<input type="submit" /></div>
</form>
</div>
</body>
</html>
If you want to customize this code, change configuration parameters inside a wurfl_config_standard.php file.
Modernizr - Server -
Modernizr is a great way to find out about your user's browser capabilities. However, you can only access its API on the browser itself, which means you can't easily benefit from knowing about browser capabilities in your server logic. The modernizr-server library is a way to bring Modernizr browser data to your server scripting environment.
Good :
Like WURFL very detailed detection, but we need to take into consideration that it is build with a different purpose the WURFL.
Bad :
Only supported on PHP, but sometimes this will be enough.
Example :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Modernizr Server Example</title>
</head>
<body>
<?php
include('modernizr-server.php');
print 'The server knows:';
foreach($modernizr as $feature=>$value) {
print "<br/> $feature: "; print_r($value);
}
?>
</body>
</html>
- It can be found here: https://github./jamesgpearce/modernizr-server
Client side:
Modernizer -
aking advantage of cool new web technologies is great fun, until you have to support browsers that lag behind. Modernizr makes it easy for you to write conditional JavaScript and CSS to handle each situation, whether a browser supports a feature or not. It’s perfect for doing progressive enhancement easily.
Good :
Only client side, server side ponent don't exist
Fast but still large for a javascript framework with its 12kb. Because of its modularity it can bee smaller, depending on your needs.
Bad :
Can do only so much, less info then server side detection.
Modernizr itself is a great way to find out about your user’s browser capabilities. However, you can only access its API on the browser itself, which means you can’t easily benefit from knowing about browser capabilities in your server logic.
- It can be found here: http://modernizr./
Example :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Modernizr Example</title>
<script src="modernizr.min.js"></script>
</head>
<body>
<script>
if (Modernizr.canvas) {
// supported
} else {
// no native canvas support available :(
}
</script>
</body>
</html>
JavaScript based browser sniffing
It is arguable that this may be (academically) the worst possible way to detect mobile but it does have its virtues.
Good :
Simple
Bad :
Where to begin
Example :
<script type="text/javascript">
var agent = navigator.userAgent;
var isWebkit = (agent.indexOf("AppleWebKit") > 0);
var isIPad = (agent.indexOf("iPad") > 0);
var isIOS = (agent.indexOf("iPhone") > 0 || agent.indexOf("iPod") > 0);
var isAndroid = (agent.indexOf("Android") > 0);
var isNewBlackBerry = (agent.indexOf("AppleWebKit") > 0 && agent.indexOf("BlackBerry") > 0);
var isWebOS = (agent.indexOf("webOS") > 0);
var isWindowsMobile = (agent.indexOf("IEMobile") > 0);
var isSmallScreen = (screen.width < 767 || (isAndroid && screen.width < 1000));
var isUnknownMobile = (isWebkit && isSmallScreen);
var isMobile = (isIOS || isAndroid || isNewBlackBerry || isWebOS || isWindowsMobile || isUnknownMobile);
var isTablet = (isIPad || (isMobile && !isSmallScreen));
if ( isMobile && isSmallScreen && document.cookie.indexOf( "mobileFullSiteClicked=") < 0 ) mobileRedirect();
</script>
This may not be the best solution but i use this function for my personal use in javascript.
By the way @Gajotres thanks for deep and useful information.
function mobilMi()
{
if( navigator.userAgent.match(/Android/i) ||
navigator.userAgent.match(/webOS/i) ||
navigator.userAgent.match(/iPhone/i) ||
navigator.userAgent.match(/iPod/i)||
navigator.userAgent.match(/iPad/i)
){
return 1;
}
else
return 0;
}
I've code something like this to get the device os type... the $test will be the string of the user agent
if (preg_match("/linux/i", $test) && preg_match("/android/i", $test)) {
$device_type = 'Android';
} else if (preg_match("/windows phone/i", $test)){
$device_type = '<font size="6">Windows Mobile</font>';
} else if (preg_match("/windows nt/i", $test)){
$device_type = 'Windows';
} else if (preg_match("/linux/i", $test)){
$device_type = 'Linux';
} else if (preg_match("/macintosh/i", $test)){
$device_type = 'Macintosh';
} else if (preg_match("/iphone/i", $test)){
$device_type = 'iPhone';
} else if (preg_match("/ipad/i", $test)){
$device_type = 'iPad';
} else if (preg_match("/symbian/i", $test)){
$device_type = 'Symbian';
} else if (preg_match("/blackberry/i", $test)){
$device_type = 'Blackberry';
} else
$device_type = 'None';
I think you need to know the pattern and get the keyword. Using WURFL sometimes doesnt get what you want.