How can I get my website to detect if a browser is on a smartphone/cellphone and show the user the mobile version of my website rather than the normal version? Any help would be appreciated!
Hi,
you need to check the user agent or the used resolution. Then you can start loading different CSS files for example.
960.gs a good start for it: http://adapt.960.gs/
Best Regards
UnitedThemes
Hello,
You can use a “mobile detection code” in your normal website. Then redirect users to the mobile website url.
There is a lot of mobile detection codes on the WEB, like THIS one.
You can also just write a media-query based CSS file for resolutions that are common to smart phones 
No browser detection needed and no “separate site” needed - just a new CSS file to rearrange the the layout to look nice on a phone.
Well, there are 2 ways of doing this.
- Create a responsive design, meaning, it checks for the screen resolution and sets some elements to display none, and loads others. The bad part is that a mobile phone user has a data plan, which, basically means he pays for each time he loads stuff he isn’t using. So, applying this method can hurt. But, nevertheless if you want to use this method, it’s quite simple.
@media screen and (max-width: 320px){
/*CSS Style For Mobile Phone Screen With Max Screen Width 320 Pixels*/
}
Inside the above code nest your CSS code that is responsible for styling your mobile device, basically, construct a new site for the mobile. That means, you should set all divs that are related to the normal screen template to display:none; and all other elements must be display:block.
If you don’t know how to test it, well, nothing is simpler, re-size your browser until you reach that resolution. You should see it pop in 
If you visit from a mobile device, it simply checks the resolution, puts all non mobile elements to display:none and shows the rest, taaadaaa! That’s one way of doing things.
The second one, is coding it for a specific resolution ( or fluid CSS ) and redirect from the main site. That is again, quite easy only, if you wish to redirect your users automatically you will need a few lines of jQuery.
(function(a,b){if(/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|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/i.test(a)||/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(it|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|ikom|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\/|se(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\-/i.test(a.substr(0,4)))window.location=b})(navigator.userAgent||navigator.vendor||window.opera,'mobile/index.html');
The last parts of the code are mobile/index.html. Replace it with the location of your mobile file. Save this code to a text file, save it as detectmobile.js and import inside your index.html file ( or whatever file you want to be seen as a mobile )
Note: You cannot test this from your computer, you need a mobile phone, the reason, it checks your browser signature. So, re-sizing your window will not help.
And voiala, when your users visit the site, it will automatically take them to the mobile version. This code applies for kind of all mobile devices. But there is a way to test it from a computer. Opera launched a mobile interface tester, which has the opera mini signature. Meaning, if you access this site and type your address in there, if the above jQuery is loaded in your page properly it will redirect it to the mobile version!
I use a combination between both, but preferably, if you want a happy user, make the mobile site as lightweight as possible using only PNG files. If his page is large, he might end up paying a lot for a visit ( If he doesn’t have a DataPlan of course )
If you need more help, shoot me a e-mail through my profile
Best of luck!
