Avoiding Compatibility Issues with User-Agent Detection

iconHeadB

Does your website play nice with every browser, operating system and device that comes to visit? There’s a pretty good chance that it does not — Somewhere, somebody is viewing your site on a new-fangled hi-tech gizmo or on some wonky, non-standards-compliant browser and it’s wreaking havoc on your meticulously-crafted web page design!

Unfortunately, all Web browsers are not created equal. Things may have improved somewhat in recent years, but the issue of cross-browser compatibility is still something that every Web designer needs to pay close attention to with each page that they create.

To further complicate matters, think of the wide array of smart-phones, mobile devices and tablets that may currently be visiting your site — many of which use their own proprietary Apps to browse the Web. Is there any way of ensuring that your website works properly on all of them?

$_SERVER['HTTP_USER_AGENT'] is a reserved PHP variable that exposes details about the device, operating system and browser accessing your website. The moment a request is sent over the Web, a piece of data known as a user-agent string is transmitted back to your server via the HTTP header. If we access this data, we can identify if a problem browser or device is visiting our site — at which point we can instruct our server to adjust accordingly.

To output the user-agent string to your browser, just use the following line of PHP code:

<?php echo $_SERVER['HTTP_USER_AGENT']; ?>

Here’s the user-agent string your browser just sent to our server when you accessed this page:

CCBot/2.0 (http://commoncrawl.org/faq/)

As you can see, the string identifies your browser and version number, as well as your operating system — Very useful information if we’re looking to to target a specific client that’s having problems with our site.

Example 1: Alternate JavaScript for a Problem Browser

Let’s say your page uses a fancy bit of JavaScript that works quite well in pretty much every major browser, but causes all sorts of problems in Internet Explorer 7. What can we do to avoid this issue? First of all, let’s check out the user-agent string for IE7:

Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0)

Notice the MSIE 7.0 part — that’s what identifies the browser as Internet Explorer 7. Using PHP’s strstr() function, we can check to see if the string MSIE 7.0 is present in the user-agent string. If the identifying string is found, we simply instruct our server to substitute the offending script with one that MSIE 7.0 has an easier time with:

<?php
$lameBrowser = "MSIE 7.0";
$clientInfo = $_SERVER['HTTP_USER_AGENT'];
$loadJS = TRUE;
if (strstr($clientInfo, $lameBrowser)) {
	$loadJS = FALSE;
}
if ($loadJS == TRUE) {
?>
<script type='text/javascript' src='scripts/fancyScript.js'></script>
<?php
} else {
?>
<script type='text/javascript' src='scripts/boringScript.js'></script>
<?php
}
?>

To summarize, we check the user-agent string and if it does NOT contain the identifier MSIE 7.0, the JavaScript file ‘fancyScript.js’ is loaded. If the browser IS identified as MSIE 7.0, the file ‘boringScript.js’ will be loaded instead.

Note that another option in this case would be to use a conditional comment such as:

<!--[if IE 7]>
Special instructions for IE 7 here
<![endif]-->

Keep in mind, however, that these types of conditional comments are totally Internet Explorer-specific — they are not supported by any other browsers.

Example 2: Alternate Style Sheet for Smart Phones

Next, let’s say that we want to provide our iPhone, Android and BlackBerry users with a ‘Smartphone-Friendly’ version of our site via CSS. We could include the following conditional statement in the <head> section of our page:


<?php
$devices = array("Android", "webOS", "iPhone", "BlackBerry");
$clientInfo = $_SERVER['HTTP_USER_AGENT'];
$aSize = sizeof($devices);
$smartPhone = FALSE;
for ($i=0; $i<$aSize; $i++) {
	if (strstr($clientInfo, $devices[$i])) {
		$smartPhone = TRUE;
	}
}
if ($smartPhone == TRUE) {
?>
<link rel="stylesheet" type="text/css" media="screen" href="mobile.css" title="mobile" />
<?php
} else {
?>
<link rel="stylesheet" type="text/css" media="screen" href="normal.css" title="normal" />
<?php
}
?>

So, what we’re doing here is telling the Web Server "If the user is accessing this page with an iPhone, BlackBerry or Android device, the style sheet ‘mobile.css’ is to be loaded. If it’s not one of the aforementioned devices, use the normal.css style sheet". Our ‘mobile.css’ file would contain style rules that take into account the viewport size and other limitations of the small-screened device.

Example 3: Alternate Content for iPhone and iPad

Let’s say our page contains a Flash movie. As we all know, both the iPhone and iPad do not support Flash. So how do we make use of user-agent detection to display alternate content?


<?php
$noFlashDevices = array("iPhone", "iPad");
$clientInfo = $_SERVER['HTTP_USER_AGENT'];
$aSize = sizeof($noFlashDevices);
$flashSupport = TRUE;
for ($i=0; $i<$aSize; $i++) {
	if (strstr($clientInfo, $noFlashDevices[$i])) {	
		$flashSupport = FALSE;	
	}	
}
if ($flashSupport == FALSE) {
?>
 <img src="noFlash.jpg" width="100" height="100" alt="altImg.jpg" />
<?php
} else {
?>
<object>
<!-- Flash embed code would go here -->
</object>
<?php
}
?>

In this case, iPhone and iPad users would see the JPEG file ‘noFlash.jpg’, whereas everyone else would see the Flash movie embedded in the page.

Example 4: Re-Direct to an Alternate Page

Finally, let’s say you want to re-direct all of your smart-phone users to another page/website entirely — one that is specifically designed and optimized for small-screened devices. You could do something like this:

<?php
$devices = array("Android", "webOS", "iPhone", "BlackBerry");
$clientInfo = $_SERVER['HTTP_USER_AGENT'];
$aSize = sizeof($devices);
$smartPhone = FALSE;
for ($i=0; $i<$aSize; $i++) {
	if (strstr($clientInfo, $devices[$i])) {
		$smartPhone = TRUE;
	}
}
if ($smartPhone == TRUE) {
  header ('Location: mobile/index.php');
  exit();
}
?>

In this case, all of your Android, iPhone & BlackBerry users would be re-directed to a ‘Smart-Phone-Friendly’ version of your website (mobile/index.php), whereas everyone else would remain on the initial page.

These are just a few ways in which the user-agent string can be used to by-pass a number of cross-browser and cross-platform compatibility issues. An extensive collection of Browser ID (User-Agent) Strings can be found at zytrax.com — very helpful indeed.

Look for more on this topic coming up in future posts. If you have any thoughts on what’s been presented here, please feel free to post a comment!

Leave a Reply

Your email address will not be published. Required fields are marked *