7

I need to detect if the user of my blazor server side application is using a mobile device. Is there any way to find out which device the user is using?

I know I can do it with a JSRuntime but is there any way to figure it out with pure C#?

Marvin Klein
  • 1,436
  • 10
  • 33
  • just curious - why? what are you needing to change? – Daniel A. White Jun 08 '20 at 19:58
  • I want to assign a diffent parallax background image to my theme. Unfortunately my theme assigns the image to the data-parallax-bg attribute. In PHP I used the Mobile_Detect class. – Marvin Klein Jun 08 '20 at 20:03
  • why not use a media query for your css? – Daniel A. White Jun 08 '20 at 20:04
  • Because the theme needs the image inline. See:
    – Marvin Klein Jun 08 '20 at 20:05
  • what theme? what framework is that? – Daniel A. White Jun 08 '20 at 20:07
  • It is just an HTML5 theme. https://themeforest.net/item/polo-responsive-multipurpose-html5-template/13708923 – Marvin Klein Jun 08 '20 at 20:09
  • its generally bad to do stuff like this with the user agent. feature detection and media queries are the best way to do it. – Daniel A. White Jun 08 '20 at 20:10
  • My reason is to render a different UI for the mobile user, because my app is by design optimized for desktop. It is a business app that shows a huge amount of data to workers. A mobile worker does completely different thing (but the database is the same) - so he doesn't need tables, just searching one thing by a number then present the results as pure text. Desktop: table (imagine Excel), Mobile: text (imagine Word). And it is also not question of UI alone, the users see DIFFERENT selection of data (workers do different tasks). – Harry Feb 17 '21 at 06:01
  • `@if (IsWorker) { }` – Bennyboy1973 Jun 07 '22 at 04:26

3 Answers3

2

I did find this article that will read you the width and height of a window in Blazor. Looks like it uses JS Interop. With that, you can determine if a user is using a mobile based on the width of their resolution. Of course, it's not 100% full proof as someone on a desktop can resize their window down to a mobile resolution. https://blazor.tips/blazor-how-to-ready-window-dimensions/

David Grace
  • 141
  • 4
2

You can detect the user agent on the JavaScript side of your app, and reference that from the C# side.

Keep in mind that iPad browsers have some mobile features and some desktop features, so it is up to you how you want to handle iPad.

Here is a script taken from the Sycfusion website:

    [wwwroot/script.js]

function isDevice() {
    return /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini|mobile/i.test(navigator.userAgent);
}

To include it in your app, you reference it in index.html

[index.html/_Host.cshtml]

<head>
 .....
 <script src="~/script.js"></script>
 ....
</head>

and then you invoke it in you blazor code

[index.razor]

@page "/"
@inject IJSRuntime jsRuntime

<h1>Responsive</h1>

<button @onclick="FindResponsiveness">Find Device</button>
<h2>@isDevice</h2>
@code {
    private string isDevice { get; set; }
    private bool mobile { get; set; }
    public async Task FindResponsiveness()
    {
        mobile = await jsRuntime.InvokeAsync<bool>("isDevice");
        isDevice = mobile ? "Mobile" : "Desktop";

    }
}
Chris Grundy
  • 98
  • 4
0

Same answer as Chris, but here is the link to the article where the code is from:

Syncfusion mobile detection article

Included on this page is also a link to a site where this method has been implemented to help you test if this works for your specific use case and device:

Mobile browser detection

Snympi
  • 859
  • 13
  • 18