Question

我有 2 个组件，一个希望在浏览器是移动设备时显示，另一个如果是平板电脑/桌面设备。

@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 标记中有上述代码，则 DB::raw("(SELECT count(messages.is_read) where is_read = 0 ) as unread")) 只会在 <MobileComponent /> 为真时才会呈现并因此出现在 Dom 中。当然反之亦然。

在 Blazor 中，您无需纠结于 css 可见性，只需像您一样对其进行编码。不再需要大量的 javascript css 操作代码。

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

2 个答案: