How to redirect your website to its mobile version

Javascript window.location Method

Mobile phones typically have a small screen width. A simple trick is to redirect if the browser width less than or equal to 800 pixels. However when the mobile is horizontal the with can be increased 960 pixels or more. The tabs use larger with will still use the non mobile site.

Place this in the head section of your main website code.

<script type="text/javascript">
  <!--
  if (screen.width <= 800) {
    window.location = "http://m.shilpasayura.com";
  }
  //-->
</script>
To get the best results, test it with various smart phones.

.htaccess URL rewrite redirects

Based on the MIME types browser support,  .htaccess can redirect visitors

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.domain.com%{REQUEST_URI} [R,L]

This can check wap capability for wap apps which are no longer needed with smart phones

CSS3 media queries

Currently this is the best option as you can use different style sheets to render your web site on any device.

<!-- CSS media query on a link element -->

<link rel="stylesheet" media="(max-width: 800px)" href="device800.css" />

<!-- CSS media query within a stylesheet -->
<style>
@media (max-width: 600px) {
  .shilpa_sidebar {  
  display: none;
  }
}
</style> 

A good method is to seperate general and device specific css into seperate css scafolds.

<style>
/*General CSS here*/
font-family:Arial, "Sans-Serief";
</style>


<style>
@media (max-width: 1300px) {
font-size:16px;
  }
</style> 

<style>
@media (max-width: 540px) {
font-size:12px;
  }
</style> 

More advanced information on this
https://developer.mozilla.org/en/docs/Web/Guide/CSS/Media_queries