Apache mobile redirection and testing user agent strings

First published on June 30, 2012

If you decide to set up a separate mobile website rather than use a responsive design, you need to implement some logic to detect a mobile browser and perform the redirection. There are many approaches to this, depending on your specific needs and your hosting and site environment. For example, you could use Apache Mobile Filter or a third-party hosted service such as Mobify.

A simple method is to perform the redirection via Apache rewrite conditions and rules in your virtual host configuration or .htaccess file.

Sample Apache rewrite rules for mobile redirection

The identification of whether or not a visitor is using a mobile browser is based on the user agent string. There are many mobile devices and thus many possible mobile user agent strings; detectmobilebrowsers.com is a great place to download lists and starter scripts for detecting mobile browsers.

The example Apache configurations below assume the following scenario:

Your main site is at www.yoursite.com and the mobile site is at m.yoursite.com.
When a mobile browser (but not a tablet) visits the main site for the first time, it should get automatically redirected to the mobile site.
On the mobile site, there is a link back to the mobile site that appends the GET parameter “fullbrowser”. If a user clicks that link, they should be kept on the full site and no longer get automatically redirected. (This is implemented by setting and checking a cookie to indicate that they went back to the full site.)
For mobile users who clicked the link to go to the full site, they would also be shown a link to go back to the mobile site that appends the GET parameter “mobilebrowser”. Clicking this link would remove the cookie that was set in the previous step; this means that the next time they visit the full site, they should again be redirected to the mobile site.

RewriteEngine On
#----------------------------------------------------------------
##
## Set the mobile-to-full cookie if a specific GET Parameter is set, and
## the client is a mobile platform
##

#The domain / sub-domain on which a GET parameter can be sent, if used; not necessary
#RewriteCond %{HTTP_HOST} ^yoursite\.com [NC]
RewriteCond %{QUERY_STRING} fullbrowser [NC]

#CO=name:value:domain:lifetime:path
#Set the cookie for a year
RewriteRule .* - [CO=fullbrowser:1:.yoursite.com:525600]

#----------------------------------------------------------------
##
## Reset the mobile-to-full cookie if a specific GET parameter is set (i.e. if they click on a "back to mobile site" link)
##
#The siteaccess on which a GET parameter can be sent, if used
RewriteCond %{QUERY_STRING} mobilebrowser [NC]
RewriteRule .* - [CO=fullbrowser:0:.yoursite.com:525600]

#----------------------------------------------------------------
##
## Redirect mobile devices if no cookie is set and no GET parameter specifies no-mobile view
##

#If no GET parameter
RewriteCond %{QUERY_STRING} !fullbrowser [NC]
#If no cookie set
RewriteCond %{HTTP_COOKIE} !fullbrowser=1 [NC]

# These user agent strings are taken from detectmobilebrowsers.com
RewriteCond %{HTTP_USER_AGENT} android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge\ |maemo|midp|
mmp|netfront|opera\ m(ob|in)i|palm(\ os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows\ (ce|phone)|xda|xiino [NC,
OR]
RewriteCond %{HTTP_USER_AGENT} ^(1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a\ wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|
as(te|us)|attw|au(di|\-m|r\ |s\ )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(i
t|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1\ u|g560|gene|gf\-5|g\-mo|go(\.
w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp(\ i|ip)|hs\-c|ht(c(\-|\ |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac(\ |\-|\/)|ibro|idea|ig01|i
kom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt(\ |\/)|klon|kpt\ |kwc\-|kyo(c|k)|le(no|xi)|lg(\ g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\
-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-|\ |o|v)|zz)|mt(50|p1|v\ )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(
0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn
\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|s
e(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v\ )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-
|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80
|81|83|85|98)|w3c(\-|\ )|webc|whit|wi(g\ |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-) [NC]

#The (public) siteaccess to be redirected to the mobile platform
RewriteCond %{HTTP_HOST} =www.yoursite.com [NC]
RewriteRule ^(.*) http://m.yoursite.com/ [L,R=302]

Testing website behavior with different user agent strings

Once you have implemented mobile redirection (or any redirection for that matter) you need to test it. When it comes to testing user agent strings from different devices, it is obviously difficult to test directly on multiple devices. Thankfully you can modify the user agent string in your browser with extensions / plugins such as this one for Google Chrome.

Selecting a user agent in Google Chrome

When I don’t need to test the display output, I prefer to use cURL in order to avoid browser caching. (Sometimes you’ll solve a problem and think it’s still broken, or vice versa, because your browser has cached the page or the redirection.)

cURL is a command line tool that, among other things, lets you test the HTTP response of a web page and also enables you to change the user agent string (via the -A parameter). It is readily available and/or installable on Linux and Mac operating systems; on Windows you can use Cygwin to get Linux-like commands.

Here is an example to test the response of a web page using an iPhone user agent:

$ curl -I http://www.yoursite.com -A "Mozilla/5.0 (iPhone; CPU iPhone OS 5_0 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9A334 Safari/7534.48.3"

HTTP/1.1 302 Found
Date: Sat, 30 Jun 2012 22:11:25 GMT
Server: Apache
Location: http://m.yoursite.com/
Content-Type: text/html; charset=utf-8