Blazor Show Component仅在移动设备上

问题描述

我有2个组件，一个是浏览器为移动"时希望显示，另一个是平板电脑/台式机.

I have 2 components, one that I wish to display if the browser is Mobile, the other if it is tablet/desktop.

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

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

I am looking to not have the Mobile Component in the DOM at all when on desktop and vice versa so i dont want to do a CSS visibility. Id rather only the one be rendered. What is the best approach to determine if the browser is a Mobile browser so I can set isMobile accordingly?

推荐答案

如果页面/组件的Razor标记中包含上述代码，则仅会呈现< MobileComponent/> 因此，当 ismobile 为true时，它将显示在Dom中.当然，反之亦然.

If you have the above code in the Razor markup for the page/component, <MobileComponent /> will only be rendered and therefore appear in the Dom when ismobile is true. And visa versa of course.

在Blazor中，您不需要拧紧CSS可见性，就可以像对其一样进行编码.不再需要大量的javascript css操作代码.

In Blazor you don't need to screw around with css visibility, code it like you have. A huge amount of javascript css manipulation code just ain't needed anymore.

这篇关于Blazor Show Component仅在移动设备上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！