A Simple Way to Detecting Mobile Browser

Wednesday, January 25, 2012

Mobile browser is totally different from regular browser. There are several limitations why it so. For one reason, it has smaller screen to displaying the app and of course the mobile hardware it self. Such that, the interpreter in mobile browser are made in "mini-scale".

Tough, the mobile browser is designed to interpreting basic html only (not that complex as regular full web version) since it potentially affecting the performance of the mobile hardware or it may hung-up the device if they try to loading a large full web version.

The creator of custom site portal often create two kind of projects; full web version & mobile version. The mobile version is a limited version of regular one, which actually have some basic features in a basic display template.

There's an up-to-date documentation describing about mobile browser completely (including the engine inside) you can found in http://en.wikipedia.org/wiki/Mobile_browser.

Also, several ways you can get from Google to detecting wether the visitors come from regular browser or mobile device. You can use an .htaccess feature, custom PHP module, .NET mobile detector scripts, etc.

But here below a simple how-to detecting and forward the visitors which come from mobile device.

<title>Hello world</title>
Browser checking, please wait…
<hr>
<script type="text/javascript">
function isMobile() {
var index = navigator.appVersion.indexOf("Mobile");
return (index > -1);
}
</script>
<script>
if (isMobile()) document.location='http://m.yourdomain.com';
else document.location='http://www.yourdomain.com';
</script>

Yup, it only use a single line of Javascript syntax. So, if it's from mobile device then forward it to mobile version. But first, make sure that you should provide both different index file on both URLs. That's all!

Labels: JavaScript, Programming, Web Programming