How to redirect your website to its mobile version
If you’ve created a mobile version of your website, you’ll need to be sure that you redirect your mobile visitors to your mobile website. For example, if someone visits elabnody.net on their phone, you’ll need a way to redirect them to m.elabnody.net (the mobile version of your site).
If you think about how your redirect actually works, in theory it’s quite east – “If the user is using a mobile device, redirect them to the mobile version of the site”.
The problem is that when people visit your website, their web browser does not explicitly say, “I am a mobile device” or “I am not a mobile device”. Instead, the browser introduces itself by providing a “user-agent”, which includes the browser name, version, and other information about your operating system. To transfer a mobile visitor, you’ll need to determine if their browser is a web browser on a mobile device or not. Besides looking at the browser the visitor is using, you can also look at other things such as their screen resolution and whether they accept file types that are common to mobile devices.
Below we’ve listed a few methods you can use to redirect visitors to the mobile version of your website:
Plugins
If you are running a Content Management System (such as WordPress or Joomla), there may be plugins already available that help with handling mobile visitors. The best way to find these plugins is to either search Google or to search the software’s website.
Javascript Method
Because mobile phones typically have a small screen width, you can redirect visitors to your mobile site if they have a screen width of less than or equal to 800 pixels. You can use the following code to do this:
<script type="text/javascript">
<!--
if (screen.width <= 800) {
window.location = "http://m.elabnody.net";
}
//-->
</script>
While testing this on a SAMSUNG smart phone, the screen resolution varied based upon how the phone was held. To get the best results, you may have to test with various smart phones.
Please keep in mind however that if the user does not have javascript enabled, this will not work.
.htaccess redirects
You can use a .htaccess redirect to transfer visitors based upon mime types that their browser accepts. For example, if the user’s browser accepts mime types that include WML (Wireless Markup Language), then most likely it is a mobile device.
The code below should be placed in your .htaccess file:
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.elabnody.net%{REQUEST_URI} [R,L]