Git Code Commit (all commits between last post and this commit (link))
Welcome to the The Globe In My Bucket Application(TGIMBA) Cascading Style Sheets (CSS) ‘make it pretty’ blog series 🙂
If you remember, the .NET 4.6.x TGIMBA version had two sets of files – mobile and desktop. I purposely have only one set of files on the .NET Core version for each client – Vanilla/JQuery JS, Angular 6 Type Script and React Redux JS clients. As part of this experiment, I want to see if a mobile and desktop layout can be created with CSS and one set of files. The first step will be to determine if the user is visiting with a mobile or desktop browser.
In the .NET 4.6.x version, mobile browser detection was very simple. Capturing the ‘HttpContext.Request.Browser.IsMobileDevice’ value was all you had to do. It looked like this:
But, much to my disappointment, this has disappeared in .NET Core. Reference #1 discusses the rationale, but I was thinking this would have been a good central feature to keep. Oh well, progress (I guess).
So, what to do? Reference #1 talks about a technique called ‘Responsive Web Design’. A quick look (reference #2) shows that this is about detecting screen sizes and other attributes to render an ‘appropriate’ view for the browser in question. This (to me) sounds a bit complicated.
I also tried Wangkanai.Detection and didn’t quickly see how to detect mobile browser as no obvious property or method for this task.
But, based on reference #6, I found an awesome site called http://detectmobilebrowsers.com/. This site provides a set of regular expressions that test a supplied user agent string and returns true if it is mobile. I found some sample user agents (reference #7 & #8) and on my very brief tests, it seems accurate. Of course, the last update (per the page) was a while back…so it will most likely have issues. But, its enough for me to get started 🙂
I added the method to ‘TestsTgimbaNetCoreWeb-Unit -> IsMobile(string userAgent)’ so it could be shared by all of the clients. It looks like this:
My two (very simple) tests look like this:
Next will be the color scheme.