Redirecting Mobile Users to Your Mobile Site

Having a mobile version of your website is a great way to make sure that visitors using a mobile device are able to properly view your site on their device. Some tools for creating mobile versions of websites have built-in options for redirecting visitors to the mobile versions. If not, you will want to redirect mobile visitors to the right version.

The redirection part is the least complicated piece of the puzzle. The most difficult part is how to properly detect that a user is on a mobile device. There are several methods for this, each with it's pros and cons. We'll cover several methods below so that you can decide which one will work best for your site.

For this article, we use an example mobile site created on the subdomain m.yourdomain.com. Please be sure to replace m.yourdomain.com with the your actual mobile site's subdomain.

Mobile Site Redirection in a Content Management System

If you are using a plugin or module with a Content Management System like WordPress, Joomla or Drupal to create the mobile version of your site, check the documentation for that plugin or module to see if redirection for mobile devices is built-in. If not, expand your search using your preferred search engine for suggestions on the best way to perform a redirect with your particular plugin or module. You may also want to look into using a different plugin that provides redirection.

Javascript Mobile Device Detection

One possible way to detect mobile browsers is by using Javascript to detect the screen width. The idea is that mobile devices will not have a screen width wider than a certain pixel size (e.g. 700 or 800). Users with a screen width less than what you specify will be redirected to the mobile site. Here's an example of the Javascript you would want to insert into each of your pages:

<script type="text/javascript">
<!--
if (screen.width <= 700) {
window.location = "http://m.yourdomain.com";
}
//-->
</script>

While this is probably the easiest method to implement, it does have a drawback. Not every mobile browser fully supports Javascript (or the user can disable it) and the redirection will fail.

Using MIME Types in .htaccess to Detect Mobile Browsers

Another method for detecting and redirecting mobile users is to check for MIME types accepted by the user's browser in your .htaccess file. Those MIME types are used to determine if the visitor is using a mobile device and then a redirect is used to take those users to the mobile version of your site. Below is an example code that can be put into your .htaccess file to detect and then redirect mobile users:

RewriteEngine On
# Check for mime types commonly accepted by mobile devices
RewriteCond %{HTTP_ACCEPT} "text\/vnd\.wap\.wml|application\/vnd\.wap\.xhtml\+xml" [NC]
RewriteCond %{REQUEST_URI} ^/$
RewriteRule ^ http://m.yourdomain.com%{REQUEST_URI} [R,L]

As mobile browsers evolve, the MIME types could change and you will want to make sure you keep up with the various MIME types for mobile browsers.

Using a Server Side Script to Detect and Redirect Mobile Users

This is one of the most reliable methods for detecting mobile browsers. Using a language (such as PHP) you can create a script that will detect mobile users based on their browser's user agent.

The only downfall of using a script alone would be that you would need to update the script as needed as new user agents are implemented in browsers. The best method is to use a script along with a device database such as WURFL (Wireless Universal Resource FiLe) to keep your user agent list as current as possible. WURFL is a great resource because it's regularly updated by developers as new device information is found.

Another good open-source option we found is Detect Mobile Browsers. From the site, you can easily download a file in your preferred programming language which you can use for your site.