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

Question

我有两个组件，如果浏览器是Mobile，我希望显示一个，如果它是tablet/desktop，我希望显示另一个。

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

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

Answer 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

Answer 2

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

在Blazor中，你不需要在css可见性上瞎折腾，像你一样编码。大量的javascript css操作代码已经不再需要了。