How to Track Browsing Device and Orientation in ASP.Net

In this article you will learn how to track the browsing device including its orientation, whether it's an iPad, iPod, iPhone or Mobile in ASP.Net.

First of all add two meta tags inside the head tag:

<meta name="HandheldFriendly" content="true" />

<meta name="viewport" content="width=device-width, maximum-scale=1.0" />

 

Next let's check whether we are browsing from a device or a Desktop.

protected void btnTrackDevice_Click(object sender, EventArgs e)
{
    HttpRequest httpRequest = HttpContext.Current.Request;
    if (httpRequest.Browser.IsMobileDevice)
    {
        string redirectTo = "Mobile/Default.aspx";
        HttpContext.Current.Response.Redirect(redirectTo);
    }
    else
    {
        HttpContext.Current.Response.Redirect("Desktop/Default.aspx");
    }
}

Let's add a few device names in am array list.

protected void btnTrackDevice1_Click(object sender, EventArgs e)
{
    //This code is used to get device name from array and redirect to page accoring to device
    bool IsDevice = false;
    string[] Devices = new string[] { "iPhone", "iPad","iPod","BlackBerry",
                                                 "Nokia", "Android", "WindowsPhone",
                                                 "Mobile"
                                                 };
    foreach (string MobileDeviceName in Devices)
    {
        if ((Request.UserAgent.IndexOf(MobileDeviceName, StringComparison.OrdinalIgnoreCase)) > 0)
        {
            IsDevice = true;
            break;
        }
    }
    if (IsDevice)
    {
        Response.Redirect("Mobile/Default.aspx");
    }
    else
    {
        Response.Redirect("Desktop/Default.aspx");
    }
}

Or if you want to, you can keep device names in a XML file so later on you can add or remove any device from the list more easily.

<?xml version="1.0" encoding="utf-8" ?>
<Devices>
  <Device>iPad</Device>
  <Device>iPhone</Device>
  <Device>iPod</Device>
  <Device>WindowsPhone</Device>
  <Device>Android</Device>
  <Device>BlackBerry</Device>
  <Device>Nokia</Device>
  <Device>Samsung</Device>
  <Device>Mobile</Device>
</Devices> 

protected void btnTrackDevice2_Click(object sender, EventArgs e)
{
    //This code used to get devices from xml file
    bool IsDevice = false;
    XDocument DeviceList = XDocument.Load(Server.MapPath("file/MobileDevices.xml"));
    var mobileDevices = from devices in DeviceList.Root.Elements()
                        select devices;
    foreach (XElement device in mobileDevices)
    {
        if (!string.IsNullOrEmpty(device.Value))
        {
            if ((Request.UserAgent.IndexOf(device.Value, StringComparison.OrdinalIgnoreCase)) > 0)
            {
                IsDevice = true;
                break;
            }
        }
    }
    if (IsDevice)
    {
        Response.Redirect("Mobile/Default.aspx");
    }
    else
    {
        Response.Redirect("Desktop/Default.aspx");
    }
    //end
}

Now let's track the device orientation mode.

Safari on the iPad does support the window.orientation property, so if necessary, you can use that to determine if the user is in horizontal or vertical mode. As a reminder of this functionality:

<button onclick="detectIPadOrientation();">
            What's my Orientation?</button>
<script type="text/javascript">
        alert(window.onorientationchange);
        window.onorientationchange = detectIPadOrientation;
        function detectIPadOrientation() {
            if (orientation == 0) {
                alert('Portrait Mode, Home Button bottom');
            }
            else if (orientation == 90) {
                alert('Landscape Mode, Home Button right');
            }
            else if (orientation == -90) {
                alert('Landscape Mode, Home Button left');
            }
            else if (orientation == 180) {
                alert('Portrait Mode, Home Button top');
            }
        } 
</script>

There is also the orientationchange event that fires on the window object when the device is rotated.

Or you can use CSS.

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> 

<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"> 

Or

$(window).bind('orientationchange', function(event) {

  alert('new orientation:' + event.orientation);

});