This article will show how to detect client device using JavaScript
How to detect client device using JavaScript
Device detection is very important for web
application. Sometimes there is different version of same website compatible
for different device.
For example, think about one big e-commerce
application where lots of information is there in home page. The organization may
take decision that when people will browse from computer with high speed of
internet then full website will get display and when people from different device
(like mobile phone ,PDA etc ) will
browse it will redirect them to customized version of their website, where full
features may not available.
Using JavaScript we can check which type of device
client is using to browse our application.
<%@
Page Language="C#" AutoEventWireup="true" CodeBehind="CheckMobile.aspx.cs" Inherits="ASP.NET.CheckMobile"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" language ="javascript">
functionCheck()
{
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/(up.browser|up.link|mmp|symbian|smartphone|midp|wap|vodafone|o2|poc ket|kindle|mobile|pda|psp|treo)/i))||
(navigator.userAgent.match(/iPod/i)) ||
(navigator.userAgent.match(/operamini/i)) ||
(navigator.userAgent.match(/blackberry/i))||
(navigator.userAgent.match(/(palmos|palm|hiptop|avantgo|plucker|xiino|blazer|elaine)/i))
||(navigator.userAgent.match(/(windowsce; ppc;|windows ce;
smartphone;|windows ce;iemobile)/i)) ||
(navigator.userAgent.match(/android/i)))
{
alert("Deviceis mobile ");
}
else{
alert("Device is computer");
}
}
</script>
</head>
<body onload="Check();">
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html>
The code is very simple and self
descriptive. If you know navigator object of JavaScript you can easily
understand. Actually navigator property contains information of user agent and
user agent is nothing but browser. We are using pattern matching technique to
detect device type like below
(navigator.userAgent.match(/iPhone/i))
By testing the above code on a computer, we will see the following output .
Conclusion:
This article shows how to detect client device type using javascript. You may use different technique too to detect client browser.