TGIMBA .NET Core – CSS ‘Beautification’ – Is it mobile or desktop?

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:

1

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:

1

My two (very simple) tests look like this:

1

Next will be the color scheme.

Stay tuned!

References

  1. https://forums.asp.net/t/2152151.aspx?HttpContext+Request
  2. https://en.wikipedia.org/wiki/Responsive_web_design
  3. https://stackoverflow.com/questions/1829089/how-does-ismobiledevice-work
  4. https://stackoverflow.com/questions/48188934/why-is-stringvalues-used-for-request-query-values
  5. https://stackoverflow.com/questions/28664770/how-to-get-user-browser-name-user-agent-in-asp-net-core
  6. https://stackoverflow.com/questions/32943526/asp-net-5-mvc-6-detect-mobile-browser
  7. https://deviceatlas.com/blog/mobile-browser-user-agent-strings
  8. https://deviceatlas.com/blog/list-of-user-agent-strings#desktop
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s