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

Posted 2023-03-27

技术标签:

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

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

@if(isMobile)

   <MobileComponent />

else

   <DesktopComponent />

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

【问题讨论】：

【参考方案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