Server Side Screen Width .NET 51Degrees etc

Question

I am trying to build an adaptive/responsive site.

My intention is that on all devices with a screen width >= 1024px I will display my Desktop version, and use responsive CSS to scale the elements. All elements will be displayed in this view.

For < 1024px screens, the display will be different, having a different series of elements displayed and a different set of responsive CSS rules.

So, I need to be able to determine the screen width, server side.

I know I could do this with a Javascript cookie and AJAX, but I don't want to go that way, so was trying to look for an ASP.NET plugin of some kind, so came across 51Degrees but am not having much success...

Using Google Chrome mobile emulator, I am always getting incorrect width results, with pretty much only the Blackberry Playbook being correct! iPhones are returning a 640px width and many devices are doubling their widths, which I presume is because of the Device Pixel Ratio

Additionally, the codes are out of date, ie, it ignores iPhone6 etc, I guess this means I need to use the pay-for version so that it downloads and updates its reference files automatically?

Code is simply:

Dim ScreenWidth as Integer = Request.Browser.ScreenPixelsWidth

But, based on my comment above, this is by and large meaningless for my purposes, similarly, it also feels like overkill to have this rather complex Reference of 51Degrees when all I need is such a small amount of data.

Previously I was using a Regex query inspecting the User agent, which looked like this:

Public Shared Function isMobile(Optional IncludeIPad As Boolean = False) As Boolean

    '   NOTE THIS FUNCTION DOES NOT CONSIDER IPADS AS MOBILE. TO INCLUDE THIS, ADD |ad TO THE b REGEX STRING AFTER ip(hone|od
    Dim u As String = HttpContext.Current.Request.ServerVariables("HTTP_USER_AGENT")

    Dim AgentString As String = "android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino"

    If IncludeIPad Then _
        AgentString = AgentString.Replace("ip(hone|od)", "ip(hone|od|ad)")

    Dim b As New Regex(AgentString, RegexOptions.IgnoreCase)
    Dim v As New Regex("1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-", RegexOptions.IgnoreCase)

    If b.IsMatch(u) Or v.IsMatch(Left(u, 4)) Or HttpContext.Current.Request.QueryString("mobile") = "yes" Then
        isMobile = True
    Else
        isMobile = False
    End If

End Function

This works fine, but is too broad and returns, for example, any Android device as Mobile, even when it's a Galaxy Tab with a 1024 screen res which I don't want to be treated as mobile. You can see I adapted the code to not treat an iPad as mobile but have been unsuccessful in doing the same with the Tab.

Finally to my actual question: Does anyone have any realistic advice to achieve this, or know of a regularly updated API which I could call to grab this data from the User Agent, or anything...?

Answer 1

51Degrees Lite version supports 30 000 most popular device/browser combinations. That means the list won't be complete.

The difficulty with screen width is that server has no realistic way of knowing what the screen size is. 51Degrees is good for detecting screen sizes of mobile devices but desktop devices is a completely different area and screen dimensions are generally not recorded for desktop/laptop devices. Have you considered using the IsMobile property instead? It effectively separates mobile and desktop devices so there is no need to check for the screen size. Or perhaps adding the IsMobile property in to the website logic so that non-mobile devices do not get checked for screen size.

Another thing to consider is whether you are using the latest data file. Lite data files get updated less frequently, but it still happens once every few weeks. The latest one can always be found on github.

Additionally, if you feel that a user agent is not identified properly you are always welcome to let us know and we will investigate if there is a problem.