RadDeviceDetectionFramework

Nowadays supporting mobile devices in the Web Development is a must. However finding the right screen size can be laborious. Here in help comes Telerik Device Detection Framework. Added in Q1 2014 this .NET library allow developers to determine the Screen Resolution of huge number of mobile devices in an elegant way. Telerik ships Device Detection Framework as a separate assembly - Telerik.Web.Device.Detection.dll.

The DeviceDetectionFramework is part of Telerik UI for ASP.NET AJAX, a professional grade UI library with 120+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Download Free Trial

When Telerik.Web.Device.Detection.dll assembly is referenced in a project, Telerik controls will use it automatically. For example those controls which need to resolve RenderMode="Auto" will use it to determine, whether to activate Mobile Render Mode.

How to use it?

In order to use Detection Framework you need to add reference to Telerik.Web.Device.Detection.dll in your project.

using Telerik.Web.Device.Detection;

Imports Telerik.Web.Device.Detection

Methods

 

Name	Description
GetScreenDimensions(string userAgent)	Returns the screens dimensions of the device made request in CSS pixels. If there is no match the dimensions will be 0.
GetScreenSize(string userAgent)	Returns the screens size based on default screen ranges (in CSS pixels).The default ranges are:Small (to 600) CSS pixelsMedium (601-1024) CSS pixelsLarge (1025 - 1366) CSS pixelsExtraLarge (over 1366) CSS pixels
GetScreenSize(string userAgent, ScreenRanges screenRanges)	Returns the screens size based on default screen ranges (in CSS pixels).The default ranges are:Small (to 600) CSS pixelsMedium (601-1024) CSS pixelsLarge (1025 - 1366) CSS pixelsExtraLarge (over 1366) CSS pixels

Getting the Screen Dimensions by User Agent String

protected override void OnInit(EventArgs e)
{
    DeviceScreenDimensions screenDimensions = Detector.GetScreenDimensions(Request.UserAgent);
    HidePlaceHolders(screenDimensions);
}

private void HidePlaceHolders(DeviceScreenDimensions screenDimensions)
{
    if (screenDimensions.Height < 650 && screenDimensions.Width < 500)
    {
        //Hide PlaceHolder1 for mobile browsers
        PlaceHolder1.Visible = false;
    }
}

protected override void OnInit(EventArgs e)
Dim screenDimensions As DeviceScreenDimensions = Detector.GetScreenDimensions(Request.UserAgent)
    HidePlaceHolders(screenDimensions)
End Sub

Private Sub HidePlaceHolders(screenDimensions As DeviceScreenDimensions)
    If screenDimensions.Height < 650 AndAlso screenDimensions.Width < 500 Then
        'Hide PlaceHolder1 for mobile browsers
        PlaceHolder1.Visible = False
    End If
End Sub

Getting the Screen Size by User Agent String

protected void Page_Load(object sender, EventArgs e)
{
    DeviceScreenSize screenSize = Detector.GetScreenSize(Request.UserAgent);
    if (screenSize == DeviceScreenSize.ExtraLarge)
    {
        //Display PlaceHolder1 if the mobile device has ExtraLarge screen size.
        PlaceHolder1.Visible = true;
    }
}

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    Dim screenSize As DeviceScreenSize = Detector.GetScreenSize(Request.UserAgent)
    If screenSize = DeviceScreenSize.ExtraLarge Then
        'Display PlaceHolder1 if the mobile device has ExtraLarge screen size.
        PlaceHolder1.Visible = True
    End If
End Sub

Note that the resolution of a desktop machine cannot be determined based on its user agent string, simply because the two are not tightly coupled. For example, a Chrome on Windows 10 will generally have the same UA string on all Win10 machines, but it can run on a 10 inch laptop at 1366x768, on a full-HD laptop, or on a 27 desktop with a 4K screen.

Getting the Screen Size by Custom Defined Ranges

protected void Page_Load(object sender, EventArgs e)
{
    ScreenRanges customScreenRanges = new ScreenRanges();
    customScreenRanges.SmallScreenSizeRange = new ScreenRange(0, 100);
    customScreenRanges.MediumScreenSizeRange = new ScreenRange(101, 200);
    customScreenRanges.LargeScreenSizeRange = new ScreenRange(201, 300);
    customScreenRanges.ExtraLargeScreenSizeRange = new ScreenRange(301, 400);
    DeviceScreenSize screenSize = Detector.GetScreenSize(Request.UserAgent,  customScreenRanges);

    if (screenSize == DeviceScreenSize.Large)
    {
        //Do some action if the device's screen size matches the custom defined ranges
    }
}

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    Dim customScreenRanges As New ScreenRanges()
    customScreenRanges.SmallScreenSizeRange = New ScreenRange(0, 100)
    customScreenRanges.MediumScreenSizeRange = New ScreenRange(101, 200)
    customScreenRanges.LargeScreenSizeRange = New ScreenRange(201, 300)
    customScreenRanges.ExtraLargeScreenSizeRange = New ScreenRange(301, 400)
    Dim screenSize As DeviceScreenSize = Detector.GetScreenSize(Request.UserAgent, customScreenRanges)

    If screenSize = DeviceScreenSize.Large Then
        'Do some action if the device's screen size matches the custom defined ranges
    End If
End Sub

Remarks

The information provided by the Telerik device detection framework is based on statistical data collected by Telerik. There is no official information by the mobile device vendors that connects specific User Agent strings with screen sizes. Also, the User Agent string of a device may change over time without notice. One must also consider that the physical pixels may not always match logical pixels. With all this in mind, there may be some inacuracies in the RadDeviceDetectionFramework information for some rare cases.

For example, all iPhone models report the same User Agent string, so there is no way to tell which device is requesting the page and what size its screen is. This is why RadDeviceDetectionFramework returns the size of an iPhone 8 as a median solution between a smaller iPhone 5 and a larger iPhone 8 Plus device.