RadDeviceDetectionFramework detect is mobile?

9 posts, 1 answers
  1. moegal
    moegal avatar
    273 posts
    Member since:
    Jul 2007

    Posted 13 Mar 2014 Link to this post

    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.
  2. Answer
    Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 17 Mar 2014 Link to this post

    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.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. moegal
    moegal avatar
    273 posts
    Member since:
    Jul 2007

    Posted 17 Mar 2014 in reply to Hristo Valyavicharski Link to this post

    Hristo,

    Thanks.

    Marty
  5. Tim Runyan
    Tim Runyan avatar
    18 posts
    Member since:
    Apr 2007

    Posted 23 Nov 2014 in reply to Hristo Valyavicharski Link to this post

    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?


  6. Dimitar
    Admin
    Dimitar avatar
    281 posts

    Posted 24 Nov 2014 Link to this post

    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.

     
  7. Fit2Page
    Fit2Page avatar
    345 posts
    Member since:
    Feb 2007

    Posted 26 May 2015 in reply to Dimitar Link to this post

    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

  8. Dimitar
    Admin
    Dimitar avatar
    281 posts

    Posted 26 May 2015 Link to this post

    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
  9. Fit2Page
    Fit2Page avatar
    345 posts
    Member since:
    Feb 2007

    Posted 27 May 2015 in reply to Dimitar Link to this post

    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

     

  10. Dimitar
    Admin
    Dimitar avatar
    281 posts

    Posted 27 May 2015 Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017