Note: this article have been updated on March 24th 2015 with IE browser check.

Sometimes, you just need to have a different pages based on User Agent. Not anymore to have a specific design for different browsers as it was 15 years back, but just because the all content might be different depending on if you are on Android, iPhone or on Windows 8 for instance.

I had to do that once while developping some web pages on PHP. At this time I was using a PHP classe that is given free for personal use (get it here).

While writing this post I have discovered plenty of solutions for mobile device detection. Most of them are listed here.

Last time I needed again to have different content based on device type I decided to use .htaccess directives. This is extremely fast and I believe it’s a cleaner approach. That’s why I thought it would be interesting to share it here.

It’s truly very elegant, but keep in mind that defining .htaccess RewriteRules with regex can be very tricky and almost always hide a little regression! You have been warned.

.htaccess RewriteRules principles

I will not go here into details about Apache .htaccess nor description of used directives. I’ll assume you know what we are talking about or alternatively you will Google for more details.

Before everything, you need to turn on RewriteEngine and set Options +FollowSymlinks in your .htaccess as bellow.

Options +FollowSymlinks
RewriteEngine on

Then, main idea is to set a bench of conditions (Rewritecond directive) for the RewriteRules to be applied.

First, you might want to say that the rule concern only a specific domain (here starting by example.com). Then define for which User Agent (piece of string) this rule will be applied (here for iPhone or iPad). Finally exclude all paths on where the different platform contents will be available. If you do not do this, while redirecting to theses folders, rules will apply again and you will end-up in a infinite loop. Of course not the Cupertino’s one (ha ha ha…).

Once all conditions you need are set, you can define your RewriteRule. It will say in RegEx something like “for any requests at root level, re-route this request to my-path-from-web-root/iphone path”.

Full bloc code that handle iPhone or iPad type of devices:

Rewritecond %{http_host} ^example.com [nc] 
RewriteCond %{HTTP_USER_AGENT} iPhone|iPad
RewriteCond %{REQUEST_URI} !\/my-path-from-web-root\/iphone
RewriteCond %{REQUEST_URI} !\/my-path-from-web-root\/android
RewriteCond %{REQUEST_URI} !\/my-path-from-web-root\/wp
RewriteCond %{REQUEST_URI} !\/my-path-from-web-root\/msie
RewriteCond %{REQUEST_URI} !\/my-path-from-web-root\/desktop
RewriteRule ^(.*)$ /my-path-from-web-root/iphone/$1 [NC]

In the sample case provided with here, I have content for iPhone (/iPad), Android, windows phone 7 and desktop.

Apply this principle to as many devices types you want

You can now apply this principle to as many devices types you want. As long as you add the line that prevent redirection to a specific device type folders. Like bellow:

RewriteCond %{REQUEST_URI} !\/my-path-from-web-root\/specific-device-type-content-folder

Off course to handle each devices you will need to find out what are relevants strings that will identify for sure a particular device type.

Full .htaccess

Here is the full code that handle redirection for iPhone/iPAd, Android, Windows Phone 7 and Desktop.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

Options +FollowSymlinks
  RewriteEngine on
   
  # Redirection msie (MS IE < 11 - otherwize "desktop" is used)
  Rewritecond %{http_host} ^example.com [nc]
  RewriteCond %{HTTP_USER_AGENT} "MSIE"
  RewriteCond %{REQUEST_URI} !\/my-path-from-web-root\/android
  RewriteCond %{REQUEST_URI} !\/my-path-from-web-root\/iphone
  RewriteCond %{REQUEST_URI} !\/my-path-from-web-root\/wp
  RewriteCond %{REQUEST_URI} !\/my-path-from-web-root\/msie
  RewriteCond %{REQUEST_URI} !\/my-path-from-web-root\/desktop
  RewriteRule ^(.*)$ /my-path-from-web-root/msie/$1 [NC,L]
  
  # Redirection Windows Phone devices
  Rewritecond %{http_host} ^example.com [nc]
  RewriteCond %{HTTP_USER_AGENT} "Windows Phone"
  RewriteCond %{REQUEST_URI} !\/my-path-from-web-root\/android
  RewriteCond %{REQUEST_URI} !\/my-path-from-web-root\/iphone
  RewriteCond %{REQUEST_URI} !\/my-path-from-web-root\/wp
  RewriteCond %{REQUEST_URI} !\/my-path-from-web-root\/msie
  RewriteCond %{REQUEST_URI} !\/my-path-from-web-root\/desktop
  RewriteRule ^(.*)$ /my-path-from-web-root/wp/$1 [NC,L]
  
  # Redirection iPhone or iPad devices
  Rewritecond %{http_host} ^example.com [nc] 
  RewriteCond %{HTTP_USER_AGENT} iPhone|iPad
  RewriteCond %{REQUEST_URI} !\/my-path-from-web-root\/iphone
  RewriteCond %{REQUEST_URI} !\/my-path-from-web-root\/android
  RewriteCond %{REQUEST_URI} !\/my-path-from-web-root\/wp
  RewriteCond %{REQUEST_URI} !\/my-path-from-web-root\/msie
  RewriteCond %{REQUEST_URI} !\/my-path-from-web-root\/desktop
  RewriteRule ^(.*)$ /my-path-from-web-root/iphone/$1 [NC]
   
  # Redirection Android devices
  Rewritecond %{http_host} ^example.com [nc] 
  RewriteCond %{HTTP_USER_AGENT} Android
  RewriteCond %{REQUEST_URI} !\/my-path-from-web-root\/android
  RewriteCond %{REQUEST_URI} !\/my-path-from-web-root\/iphone
  RewriteCond %{REQUEST_URI} !\/my-path-from-web-root\/wp
  RewriteCond %{REQUEST_URI} !\/my-path-from-web-root\/msie
  RewriteCond %{REQUEST_URI} !\/my-path-from-web-root\/desktop
  RewriteRule ^(.*)$ /my-path-from-web-root/android/$1 [NC]
  
  # Redirection for everything not identfied as before (fallback is "desktop")
  Rewritecond %{http_host} ^example.com [nc]
  RewriteCond %{HTTP_USER_AGENT} ^(?:(?!iPhone|iPad|Android|Phone).)*$
  RewriteCond %{REQUEST_URI} !\/my-path-from-web-root\/android
  RewriteCond %{REQUEST_URI} !\/my-path-from-web-root\/iphone
  RewriteCond %{REQUEST_URI} !\/my-path-from-web-root\/wp
  RewriteCond %{REQUEST_URI} !\/my-path-from-web-root\/msie
  RewriteCond %{REQUEST_URI} !\/my-path-from-web-root\/desktop
  RewriteRule ^(.*)$ /my-path-from-web-root/desktop/$1 [NC]

Your comments or improvements are welcome!