Blazor 仅在移动设备上显示组件答案

【问题标题】：Blazor Show Component only if on MobileBlazor 仅在移动设备上显示组件
【发布时间】：2021-05-12 07:04:50
【问题描述】：

我有 2 个组件，如果浏览器是移动浏览器，我希望显示一个，如果是平板电脑/台式机，我希望显示另一个。

@if(isMobile)
{
   <MobileComponent />
}
else
{
   <DesktopComponent />
}

我希望在桌面上完全没有移动组件在 DOM 中，反之亦然，所以我不想做 CSS 可见性。我宁愿只渲染一个。确定浏览器是否为移动浏览器以便我可以相应地设置 isMobile 的最佳方法是什么？

【问题讨论】：

标签： blazor .net-5

【解决方案1】：

这是我创建的方法。使用以下函数将js添加到您的Index.html页面

<script>

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

</script>

然后在您想知道浏览器是否移动的任何组件上添加以下内容

protected override async Task OnInitializedAsync()
{
    IsMobile = await JSRuntime.InvokeAsync<bool>("isDevice");
}

如果您使用 Chrome 进行调试，当您将浏览器设置为移动时，该值将为 true

【讨论】：

【解决方案2】：

如果您在页面/组件的 Razor 标记中有上述代码，<MobileComponent /> 将仅在 ismobile 为 true 时呈现并因此出现在 Dom 中。当然反之亦然。

在 Blazor 中，您无需搞乱 css 可见性，像您一样编写代码。不再需要大量的 javascript css 操作代码。

【讨论】：

我知道这一点。问题更多是关于如何确定 isMobile。如果浏览器是移动浏览器，最好的获取方式是什么，以便我可以正确设置 isMobile
好的，不清楚。试试here