RadDeviceDetectionFramework detect is mobile?

[moegal]

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.

[Hristo Valyavicharski]

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

 

 

[moegal]

Hristo,

Thanks.

Marty

[Tim Runyan]

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?

[Dimitar]

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

 

 

[Fit2Page]

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

[Dimitar]

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

[Fit2Page]

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

 

[Dimitar]

Hi Marc,

Thank you for sharing this solution with the community.

Regards,
Dimitar
Telerik

[Samuel]

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

[Samuel]

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

[Vessy]

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

[Samuel]

Thank you Vessy!

 

Would you mind having a look at this post please?

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

Thanks,

 

Samuel

[Arpus]

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,