mobile-redirect

How to redirect your website to its mobile version

Our customers can replace their old websites with a new responsive website. Responsive websites are built with fluid structure and are able to automatically resize to fit any computers, small phones, tablets and other devices.

 

However some customers don't wish to replace old websites with responsive websites. There is a solution:

1. create a sub-domain and set up responsive website. Your mobile website can be like: http://m.yourwebsite.com.
OR, you can purchase another hosting server like www.yournewwebsite.com. It would be like http://www.yournewwebsite.com

2. use the following methods to redirect mobile users to your responsive mobile website

 

Redirect Mobile Devices

 

1. The JavaScript Methods

Method (A): screen size method

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 place this code in the head section of your main website code. That way when your site is visited, the javascript will see the browser width and redirect to the appropriate site

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

Method (B): user-agent method

<script type="text/javascript">
  <!--
 function mobile_device_detect(url)
{
        var thisOS=navigator.platform;
        var os=new Array("iPhone","iPod","iPad","android","Nokia","SymbianOS","Symbian","Windows Phone","Phone","Linux armv71","MAUI","UNTRUSTED/1.0","Windows CE","BlackBerry","IEMobile");
 for(var i=0;i<os.length;i++)
        {
 if(thisOS.match(os[i]))
        {   
  window.location=url;
 }
  
 }
 
 if(navigator.platform.indexOf('iPad') != -1)
        {
  window.location=url;
 }
 
 
  var check = navigator.appVersion;
  if( check.match(/linux/i) )
          {
  
   if(check.match(/mobile/i) || check.match(/X11/i))
                 {
   window.location=url;
   }  
 }

 Array.prototype.in_array = function(e)
 {
  for(i=0;i<this.length;i++)
  {
   if(this[i] == e)
   return true;
  }
  return false;
 }
} 
mobile_device_detect("http://m.yourwebsite.com");
 //-->
</script>

Note: when you use Javascript methods, remember to replace "http://m.yourwebsite.com" with your real mobile website URL

 

2. The New CSS @media Method

CSS has a built-in method to detect mobile browsers. It then displays CSS styles based on the browser window size. For this you do not require a separate mobile site. You need two style sheets within one webpage, the first for the “screen” media type (for desktop monitors) and the other for the “handheld” media type (for smartphones).

To implement this method you must paste the following set of codes in the <head> tag of your HTML document.

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
/* Styles */
 
3. The Plugin Method

If you are using a Content Management System (CMS)  platform such as WordPress or Joomla, you are in luck. They have ready-made plugins that help redirect mobile users to your mobile website.

Some of these CMS-specific mobile redirect plugins are as follows:

For WordPress – Simple Mobile URL Redirect, WordPress Mobile Pack

For Joomla – Simple Mobile Detection

For Magento – Theme Switcher

For Drupal – Simple Mobile Redirect, Mobile JS Redirect

If your website is created in any other CMS, try a Google search for a plugin that helps with mobile redirects for that particular CMS.

 

Menu
x