logo标签列表

如何在 Blazor 服务器端应用程序中检测移动设备？

c#asp.net-coreblazorblazor-server-side
8

我需要检测我的 Blazor 服务器端应用程序的用户是否正在使用移动设备。有没有办法找出用户正在使用的设备？

我知道可以使用 JSRuntime 来实现，但有没有纯 C# 的方法来确定它呢？

只是好奇 - 为什么？你需要改变什么吗？ - Daniel A. White
我想为我的主题分配一个不同的视差背景图像。不幸的是，我的主题将图像分配给data-parallax-bg属性。在PHP中，我使用了Mobile_Detect类。 - Marvin Klein
为什么不在你的CSS中使用媒体查询？ - Daniel A. White
我的原因是为移动用户提供不同的UI，因为我的应用程序是专门为桌面优化设计的。这是一个商业应用程序，向工人展示大量的数据。移动工作者做完全不同的事情（但数据库相同）- 所以他不需要表格，只需通过数字搜索一件事物，然后将结果呈现为纯文本。桌面：表格（想象Excel），移动：文本（想象Word）。而且这也不仅仅是UI的问题，用户看到不同的数据选择（工人执行不同的任务）。 - Harry
@if (IsWorker) { <WorkerComponent /> } - Bennyboy1973
显示剩余4条评论
3个回答
5

您可以在JavaScript端检测用户代理，并从C#端引用它。

请注意，iPad浏览器具有一些移动功能和一些桌面功能，因此如何处理iPad取决于您的选择。

这是从Sycfusion网站获取的脚本：

    [wwwroot/script.js]

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

要将它包含在您的应用程序中，您需要在index.html中引用它。
[index.html/_Host.cshtml]

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

然后在 Blazor 代码中调用它。
[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";

    }
}
2
我找到了一篇文章，可以读取Blazor窗口的宽度和高度。看起来它使用JS互操作。通过这种方式，您可以根据分辨率宽度确定用户是否使用移动设备。当然，这并不是100％可靠的，因为桌面用户可以将其窗口调整为移动设备的分辨率。以下是相关文章链接：https://blazor.tips/blazor-how-to-ready-window-dimensions/
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接