Simple Server-Side Browser Detection with PHP

php

Ever wish you could make a webpage behave according to the browser it is being viewed with? In many cases this can be done with some well-placed CSS code. But, how about those situations when CSS can’t help us out? CSS hacks and tricks won’t let you target Firefox, Chrome or mobile devices. So, do you just stay away from using custom content in those browsers?

Enter PHP browser detection! With just a little bit of code, your site can reach its maximum potential in every browser, and even in mobile devices.

Some common uses for browser detection include:

  • - avoiding choppy JavaScript transitions by serving different versions of the script according to browser or device performance
  • - serving alternate content to iPhone browsers where Flash would otherwise be used
  • - getting rid of elements that cause rendering problems in some browsers but aren’t essential
  • - automatically populating a form with the current browser and version for simple debugging purposes

To get an idea of usage, load this page in Chrome or Safari and take a look at the header. Now load it in Internet Explorer. Those subtle differences you see in the header allow the code to run more smoothly in mobile devices and IE. And though it doesn’t look exactly the same, I’ve had no problems with branding the recognizable animation as my handle. Enough talk — let’s get to it, then.

The Basic Example Code

Here is an implementation of this code as it appears in the header.php of this site:

As you can see here, I’m using a single line of code that tells the server to check the user agent. Then we just employ normal PHP if statements to define what should be displayed in each browser. First, I check for both the iPhone and IE and serve a stripped-down version of my site menu. Then, I serve everything else a more beefed-up version of that same menu. Of course, this is all pretty basic so far.

Going a Bit Deeper

But what if you need to target other browsers? Here’s the code to target some other common browsers without any additional formatting:

Now, there are a few things to be explained here, even before we really get into the code. The opera browser has had many problems in the past regarding user agent spoofing. This spoofing was necessary because the MSN and IE browsers allowed developers to only serve content for their software (which was, at the time, considered to be top-notch). Pretty much, this was IE’s attempt at sabotaging the web into using their browser out of necessity, not choice (tisk, tisk, IE). In order for that content to be visible in Opera, their developers found it necessary to spoof their user agent to look and act like IE. Now, this really hasn’t been too much of a problem since 2005, when Opera 8.02 was released with the option to use its own user agent string (and finally grew up as a big-boy browser… sort-of) But as developers, we must remember that content needs to be served to the widest possible audience (as some companies won’t allow their employees to upgrade software).

So, why did I make you sit through that winded explanation? Take a look again at that first line of code above. Notice that we not only detect the IE browser, but also conditionally detect for “if not opera.” This should protect against all that nasty user agent spoofing for those who run versions of Opera younger than 8.02. But, that’s not all. Notice that we also later detect for the opera user agent with no other conditionals. This should take care of all those later versions of Opera which don’t run into the spoofing stuff.

Still with me? Good, because we’re not quite done with the explanations. It’s not really spoofing, but Chrome and Safari both use the ‘webkit’ user agent (very familiar to anyone whose written CSS3). So, using our script, Chrome will always be recognized as Safari (the default webkit browser). This really shouldn’t be a problem if you are just wanting your content to be served identically across browsers. But, if you’re looking to provide different content for those two browsers, this solution will not work for you.

Detecting Browser Versions

So, what about those instances when you really need to serve alternate content to specific versions of browsers (can you say IE6)?

So, what we’ve done here is added the major versions to our ‘preg_match’ detection string. In this case, we will check for IE versions 1-6 and serve some content for those. If that doesn’t match the version, we can assume the user is on IE7 or above and serve them alternate content for those browser versions.

So there you have it… simple browser detection using nothing but a few lines of PHP. In a small number of cases, this script can produce false positives (for example, if IE is being run in compatibility mode). In those cases, it may be best to run your site through a CMS and use a pre-packaged plugin. I know there are a few for WordPress, but most have far more code than is necessary for most uses. If you have found one of these plugins, let me know about it in the comments.

Caio!

About the Author

Dave Winter focuses in WordPress UI Design and WordPress Plugin Development (some have labelled him a fanatic) but has hands in many other projects, including photography and music. He's never far from a computer... or an iPad (for testing purposes, of course). If you've been to a WordCamp in Southern California, he probably already knows who you are (or maybe not - he's terrible with names). Dave currently teaches courses at California State University, Long Beach alongside his small business at dauid.us (and his students think he's pretty boss).

Comments

  1. great job, I like your blog

  2. Brenda Robles says:

    I’m impressed that this is possible with PHP. I’m new to WP, and I’m looking for a way to change some things on my site depending on the browser. It seems like its possible. But, how does it work? Is there a plugin or do I have to put the code in myself? Thanks for helping.

    • Dave Winter says:

      Brenda,

      This code must be placed directly into the corresponding theme file. So, if you wanted to change your site’s logo based on the browser, you would simply amend the code above to where you would like your logo to appear, then just change out the logos. It gets a bit more complicated when you try to add supreme functionality. I’m sure you could find some other resources on the web that help you out with this… and I think there are a few WordPress plugins, too. Holla’ back if you need any more help.

      -Dave

Let me know what you're thinking

© 2014, Dave Winter (dauidus)