Apache2: How to Redirect Users to Mobile or Normal Web Site Based on Device Using mod_rewrite

Since the massive rise of smartphones and tablets like the iPhone, iPad, Android phones and tablets, BlackBerries, etc. you might have considered creating a mobile version of your web site. This tutorial explains how to configure Apache to serve the mobile version of your website if the visitor uses a mobile device and the regular version if the visitor uses a standard desktop PC. This can be achieved with Apache's rewrite module.

1 Preliminary Note

In this tutorial, my "normal" website is accessible under http://www.example.com and http://example.com, while my mobile site is called http://m.example.com. These vhosts already exist on my system, so I'm not going to cover how to set them up.

2 Enabling mod_rewrite

First, you must ensure that the Apache module mod_rewrite is enabled. This module allows you to do an httpd redirect, apache redirection, and apache rewrite URL via an apache web server. On Debian/Ubuntu, you can enable it like this:

a2enmod rewrite

Restart Apache afterwards - for Debian/Ubuntu, the command is:

/etc/init.d/apache2 restart

 3 Configuring Apache To Allow Rewrite Rules In .htaccess Files

My "normal" web site www.example.com/example.com has the vhost configuration file /etc/apache2/sites-available/www.example.com.vhost and the document root /var/www/www.example.com/web.

My mobile site m.example.com has the vhost configuration file /etc/apache2/sites-available/m.example.com.vhost and the document root /var/www/www.example.com/mobile.

I want to place the rewrite rules for each site in an .htaccess file (although it is also possible to place them directly in the vhost configuration file) with get read by apache http server. Therefore I must first modify our vhost configurations so that both .htaccess files can contain rewrite directives. We can do this with the line AllowOverride All (which allows .htaccess to override all settings in the vhost configuration, the server configuration):

vi /etc/apache2/sites-available/www.example.com.vhost
[...]
        <Directory /var/www/www.example.com/web/>
                AllowOverride All
	</Directory>
[...]
vi /etc/apache2/sites-available/m.example.com.vhost
[...]
        <Directory /var/www/www.example.com/mobile/>
                AllowOverride All
        </Directory>
[...]

Restart Apache afterward:

/etc/init.d/apache2 restart

 4 Creating Rewrite Rules

Now let's create the rewrite rules for the "normal" website www.example.com/example.com that will redirect all users of mobile devices to the mobile version m.example.com - I focus on the relevant devices/user agents here, which are Android, Blackberry, Googlebot-mobile (Google's mobile search bot), IE Mobile, iPad, iPhone, iPod, Opera Mobile, PalmOS, and WebOS.

The /var/www/www.example.com/web/.htaccess file looks as follows:

vi /var/www/www.example.com/web/.htaccess
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} "android|blackberry|googlebot-mobile|iemobile|ipad|iphone|ipod|opera mobile|palmos|webos" [NC]
RewriteRule ^$ http://m.example.com/ [L,R=302]
</IfModule>

For our mobile web site m.example.com, the rewrite rules that redirect all users that don't use a mobile device to our "normal" web site www.example.com/example.com look as follows - I've negated the RewriteCond condition from the previous .htaccess file:

vi /var/www/www.example.com/mobile/.htaccess
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} "!(android|blackberry|googlebot-mobile|iemobile|ipad|iphone|ipod|opera mobile|palmos|webos)" [NC]
RewriteRule ^$ http://www.example.com/ [L,R=302]
</IfModule>

That's it, we set up our redirect directive! Now you can do some testing, e.g. visit m.example.com with a standard desktop browser:

If all goes well, you should be redirected to www.example.com:

Now test with a mobile device (I use an Android phone here) and go to www.example.com:

You should be redirected to m.example.com:

 

5 Links

Share this page:

13 Comment(s)