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

我有两个组件，一个是我希望在浏览器是移动的情况下显示的，另一个是平板电脑/桌面

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

@if（isMobile）
{
}
其他的
{
}

---

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

如果页面/组件的Razor标记中有上述代码，

将仅在

isMobile

为true时呈现，并因此出现在Dom中。当然，反之亦然

---

在Blazor中，您不需要在css可见性上乱动，只需像编写代码一样编写即可。大量javascript css操作代码不再需要了。

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

<script>

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

</script>

函数isDevice（）{
return/android | webos | iphone | ipad | ipod | blackberry | iemobile | opera mini | mobile/i.test（navigator.userAgent）；
}

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

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

受保护的重写异步任务OnInitializedAsync（）
{
IsMobile=await JSRuntime.InvokeAsync（“isDevice”）；
}

---

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

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