This is a migrated thread and some comments may be shown as answers.

RadDeviceDetectionFramework detect is mobile?

13 Answers 182 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
moegal
Top achievements
Rank 1
moegal asked on 13 Mar 2014, 08:13 PM
How would I do a server side check to detect if the device is a mobile device?

I would rather not wait until the page loads to have JavaScript detect if I can help it.

Is this something I could use or should I consider something like 51degrees or other detection frameworks.

Thanks, Marty

PS:  I just found RadDeviceDetectionFramework in the docs. Maybe I missed the announcement on it.

13 Answers, 1 is accepted

Sort by
0
Accepted
Hristo Valyavicharski
Telerik team
answered on 17 Mar 2014, 09:05 AM
Hi Marty,

EDIT:

RadDeviceDetectionFramework matches the user agent string from the request with a predefined database that holds records for various mobile devices screen size in CSS pixels. On desktop browsers there is no fixed screen size that could be matched against a certain user agent string value. This string would be one and the same for a 13 inch screen and a 19 inch screen used with one and the same version of a desktop browser. For this reason the only certain information about desktop browsers is that they are in the ExtraLarge range. As dimensions cannot be determined on the server, they are returned as 0. If the size of device is not ExtraLarge, you can consider this mobile.

You can use both RadDeviceDetectionFramework or 51degrees. It depends on your scenario.

Regards,
Hristo Valyavicharski
Telerik
 

DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.

 
0
moegal
Top achievements
Rank 1
answered on 17 Mar 2014, 12:05 PM
Hristo,

Thanks.

Marty
0
Tim Runyan
Top achievements
Rank 1
answered on 24 Nov 2014, 12:49 AM
Just three questions regarding RadDeviceDetectionFramework:

1) just to be sure, are you saying that we can interpret ExtraLarge to mean this is definitely a desktop and any other value to mean this is definitely a mobile?

2) just curious why the viewport breakpoints at the low end in RadDeviceDetectionFramework don't match the breakpoints at the low end for RadPageLayout

3) how about using the browser version info in the agent string to determine if the browser on the device supports media queries and return that info as well on the server side?


0
Dimitar
Telerik team
answered on 24 Nov 2014, 11:50 AM
Hello,

I would like to present you in a few sentences the purpose of the RadDeviceDetectionFramework, in order to give you a better understanding of this product and its features.

It is designed to distinguish whether your application is browsed on a desktop screen or on a mobile device screen. Its purpose is to allow automatic enabling of controls' Mobile render mode when browsed under mobile devices as well as to allow you to apply different CSS for different predefined or custom ranges of mobile devices' screen size. Desktop screens size is not covered by this tool as those screens are big enough to allow work with the controls' Classic or Lightweight render mode.


Now let's focus on the specific questions:

1) As stated in the RadDeviceDetectionFramework, ExtraLarge would definitely mean that the screen size is over 1366 CSS pixels. The majority of desktop screens fall into that category nowadays. Each range corresponds to the specific CSS pixels range specified in the documentation.
The RadDeviceDetection purpose is to enforce render mode Mobile for a control with RenderMode="Auto", when browsed on mobile device. And this is achieved not only by accessing the screen size, but the OS used as well. Thus, a RadMenu would not become mobile unless it is browsed on a mobile device - smaller desktop browser windows would be ignored as they would be detected as not mobile based on OS.

2) RadPageLayout has different viewport breakpoints than the ones used for RadDeviceDetectionFramework due to its different purpose. The RadPageLayout is used for setting up layout, not for enabling render mode. Thus, it needs one more level for enabling different layout for different cases. In addition, the RadDeviceDetectionFramework provides the opportunity to define your own custom ranges, if the default ones does not fit your case.

3) Using the browser version info in the agent string to determine if the browser on the device supports media queries is not supported by the RadDeviceDetectionFramework as it goes out of its current purpose scope. Using such info for browser features could be dubious as browsers tend to present themselves as other browsers due to the so called browser wars.

Regards,
Dimitar
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Fit2Page
Top achievements
Rank 1
Iron
Veteran
Iron
answered on 26 May 2015, 09:01 AM

I think it is a serious request to build in Orientation detection in the DetectionFramework, especially with the eye on highres smartphone screens.

 

Is this something which is already in progress?

 

Marc

0
Dimitar
Telerik team
answered on 26 May 2015, 10:46 AM
Hi Marc,

RadDeviceDetectionFramework uses the browser user agent string to match against a predefined database on the server and decide whether the device used is mobile or not. As the user agent string does not provide any information about device orientation, the suggested feature cannot be achieved with the RadDeviceDetectionFramework.

You could try a client-side approach for determining the device orientation. For example you could use Media Queries.

Regards,
Dimitar
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Fit2Page
Top achievements
Rank 1
Iron
Veteran
Iron
answered on 27 May 2015, 07:18 AM

I needed the device orientation in Asp.NET so I ended up with following code.

The Placeholder is loaded with applicable UserControl.

I hope this helps anyone....

 

                             <telerik:RadAjaxManagerproxy ID="RadAjaxManager1" runat="server">
                                  <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                    <UpdatedControls>
                         <telerik:AjaxUpdatedControl ControlID="PlaceHolder1"></telerik:AjaxUpdatedControl>
                    </UpdatedControls>
                </telerik:AjaxSetting>
                                       </AjaxSettings>
        </telerik:RadAjaxManagerproxy>

                            <asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
                    


                            <telerik:RadCodeBlock runat="server">
                                <script type="text/javascript">

                                    $(document).ready(function () {

                                        var width = screen.availWidth;
                                        var height = screen.availHeight;

                                        if (width > height) {
                                            $find("<%= RadAjaxManager.GetCurrent(Me).ClientID%>").ajaxRequest("Landscape");
                                        }
                                        else{
                                            $find("<%= RadAjaxManager.GetCurrent(Me).ClientID%>").ajaxRequest("Portrait");
                                        }


    window.addEventListener("orientationchange", function () {
        if (window.orientation == 90 || window.orientation == -90) {
            $find("<%= RadAjaxManager.GetCurrent(Me).ClientID%>").ajaxRequest("Landscape");
        }
        else {
            $find("<%= RadAjaxManager.GetCurrent(Me).ClientID%>").ajaxRequest("Portrait");
        }
    }, false);
});
</script>
                            </telerik:RadCodeBlock>

 

 

Fill the PlaceHolder with UserControl from RadAjaxManager on the MasterPage:

 

 Protected Sub RadAjaxManager1_AjaxRequest(ByVal sender As Object, ByVal e As AjaxRequestEventArgs)

        Dim cph As ContentPlaceHolder = FindControl("cphTekst")
        Dim s As slides = CType(cph.FindControl("Slides1"), slides)
        Dim plh As PlaceHolder = CType(cph.FindControl("PlaceHolder1"), PlaceHolder)
        Dim uc As UserControl

        If e.Argument.Equals("Portrait") Then
            uc = LoadControl("~/includes/slidesmobile.ascx")
        Else
            uc = LoadControl("~/includes/slides.ascx")
        End If

        plh.Controls.Add(uc)
        RadAjaxManager1.ResponseScripts.Add("nivoInit()")'initialize the nivoSlider again

        'RadAjaxManager1.Alert("AjaxRequest raised from the " + e.Argument)
    End Sub

 

Marc

Fit2Page

 

0
Dimitar
Telerik team
answered on 27 May 2015, 07:25 AM
Hi Marc,

Thank you for sharing this solution with the community.

Regards,
Dimitar
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Samuel
Top achievements
Rank 1
answered on 17 Feb 2017, 06:27 PM

I am using Chrome on an iPhone 7+ and Detector.GetScreenSize() returns ExtraLarge, while returning small in Safari and FF.

My Chrome user agent is : Mozilla/5.0 (iPhone; CPU iPhone OS 10_2_1 like Mac OS X) AppleWebKit/602.1.50 (KHTML, like Gecko) CriOS/56.0.2924.79 Mobile/14D27 Safari/602.1

Is there something I can do about it?

 

Thanks,

 

Samuel

0
Samuel
Top achievements
Rank 1
answered on 17 Feb 2017, 06:27 PM
I am using Chrome on an iPhone 7+ and Detector.GetScreenSize() returns ExtraLarge, while returning small in Safari and FF.

My Chrome user agent is : Mozilla/5.0 (iPhone; CPU iPhone OS 10_2_1 like Mac OS X) AppleWebKit/602.1.50 (KHTML, like Gecko) CriOS/56.0.2924.79 Mobile/14D27 Safari/602.1

Is there something I can do about it?

Thanks,

Samuel
0
Vessy
Telerik team
answered on 22 Feb 2017, 01:07 PM
Hi Samuel,

Thank you for bringing this issue to our attention. Currently iPhone 7 is not added to the devices recognized by the device detection framework, thus its size is not returned properly. We have added this improvement to our backlog and will look at it as soon as possible.

Meanwhile, you can consider defining custom screen ranges like explained here:
http://docs.telerik.com/devtools/aspnet-ajax/controls/raddevicedetectionframework#getting-the-screen-size-by-custom-defined-ranges

In addition, I have updated you Telerik points as a small sign of gratitude for the reported omission.

Regards,
Vessy
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Samuel
Top achievements
Rank 1
answered on 07 Mar 2017, 03:42 PM

Thank you Vessy!

 

Would you mind having a look at this post please?

http://www.telerik.com/forums/hidden-columns-taking-space

Thanks,

 

Samuel

0
Arpus
Top achievements
Rank 1
answered on 30 Aug 2017, 10:06 AM

I read an Article and found this code and I am using this in my application but for Nexus 6 and some more devices it's not displaying properly for the range that's been given there. can you suggest what else can be done for that range....

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

}

}

 

Thanks,

 

Tags
General Discussions
Asked by
moegal
Top achievements
Rank 1
Answers by
Hristo Valyavicharski
Telerik team
moegal
Top achievements
Rank 1
Tim Runyan
Top achievements
Rank 1
Dimitar
Telerik team
Fit2Page
Top achievements
Rank 1
Iron
Veteran
Iron
Samuel
Top achievements
Rank 1
Vessy
Telerik team
Arpus
Top achievements
Rank 1
Share this question
or