Apache2: How To Redirect Users To Mobile Or Normal Web Site Based On Device Using mod_rewrite

Want to support HowtoForge? Become a subscriber!
 
Submitted by falko (Contact Author) (Forums) on Tue, 2011-09-06 17:00. :: Android | Web Server | Apache

Apache2: How To Redirect Users To Mobile Or Normal Web Site Based On Device Using mod_rewrite

Version 1.0
Author: Falko Timme <ft [at] falkotimme [dot] com>
Follow me on Twitter
Last edited 08/24/2011

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 web site if the visitor uses a mobile device, and the normal version if the visitor uses a normal desktop PC. This can be achieved with Apache's rewrite module.

I do not issue any guarantee that this will work for you!

 

1 Preliminary Note

In this tutorial, my "normal" web site 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 have to make sure that the Apache module mod_rewrite is enabled. 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 the rewrite rules directly in the vhost configuration file). Therefore I must first modify our vhost configurations so that both .htaccess files are allowed to contain rewrite directives. We can do this with the line AllowOverride All (which allows .htaccess to override all settings in the vhost 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 afterwards:

/etc/init.d/apache2 restart

 

4 Creating Rewrite Rules

Now let's create the rewrite rules for the "normal" web site 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 simply 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! Now you can do some testing, e.g. visit m.example.com with a normal 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


Please do not use the comment function to ask for help! If you need help, please use our forum.
Comments will be published after administrator approval.
Submitted by Vigram K (not registered) on Fri, 2013-01-04 08:12.
Submitted by Mallak85 (not registered) on Thu, 2012-11-15 09:38.
I found the codes in this page the most useful. You guys rock! I was finally able to get my site to recognize mobile devices, and redirect them over to a mobile site, I created. However, I have one question. For tablets, like the HP TouchPad, which ALSO runs on WebOS, I'm thinking I may want to create a link that would disable this redirect, but I can't think of how to code this. Can anybody provide me any input as to how I might incorporate a link on my mobile webpage, that if clicked, will bypass this redirect and take them directly back to my non-mobile optimized site?
Submitted by idel (not registered) on Thu, 2012-02-02 00:15.

I think the best way to redirect mobile is with "Apache Mobile Filter" an open source and free project below an example:

PerlSetEnv AMFMobileHome /usr/local/AMF
PerlSetEnv AMFProductionMode true
PerlSetEnv ServerMemCached localhost:11211
PerlTransHandler +Apache2::AMFLiteDetectionFilter
RewriteEngine on
RewriteCond %{ENV:AMF_ISMOBILE} ^true*
RewriteRule ^(.*)$ http://m.foo.org [R=301,L]

you can also use AMFDetectRightFilter, AMF51DegreesFilter or AMFWURFLFilter is depend of which device repository you want to use.

For more detail: http://www.apachemobilefilter.org

Submitted by Oliver Ponder (not registered) on Tue, 2011-11-15 20:31.

The lines that are like:

RewriteRule ^$ http://m.example.com/ [L,R=302]

Feature a matcher that will never match anything.

It should be something like

RewriteRule ^/(.*) http://m.example.com/ [L,R=302]

or

RewriteRule ^(.*)$ http://m.example.com/ [L,R=302]

Submitted by Anonymous (not registered) on Sun, 2011-09-25 06:10.
Great tutorial - I have tried this on a website under construction and it works as expected for Iceape as well as for HTC smartphone. However I do agree with the previous comment - iPads have 1024x768 px screens so should (?) display standard web pages correctly and may have to be excluded from the list of small devices. A problem may arise with Android which could be used for smart phones as well as for tablets. Not sure if this is workable other than by excluding Android as well, and provide a link at top of page to the small-screen pages. In which case every device could be provided with the choice, but necessitates small-screen devices downloading unsuitable pages initially.
Submitted by Anonymous (not registered) on Mon, 2011-09-12 08:15.
Please don't do this without a way of giving the visitor to your site the option to override. Tablets are as capable as desktops and it's very frustrating when you're stuck viewing a cut-down site designed for a 3 or 4 inch screen on a device with a 10 inch screen.
Submitted by Marco Garcia (not registered) on Fri, 2012-04-20 16:08.

Yes! ItĀ“s true. 

And iĀ“ve been such a time frustrated with all the m.site. I got a Xoom Tablet with Android 3 and became less frustrated when i discovered that the Opera 5 Navigator could simulate a desktop connection. ThereĀ“s an option to choose between tablet and desktop mode. I agree that Tablets has the same power that most netbooks and the main difference is that netbooks are more suited to editing uses while tablets are more suited to viewing.

Submitted by Anonymous++ (not registered) on Fri, 2011-10-07 20:55.

Anonymous is right.  Forcing this on the user is like a cafe that checks what kind of cup you brought in and gives you the drink they think best fits your container. Maybe I like tea in my coffee mug (or hot cocoa with cinnamon).  Better to let me decide, and when I come back next time (because of your friendly service and nice tea), ask me briefly, "the usual?" I should always have the option to change my mind, don't nag, just give me choices and remember me from last time if at all possible.