如何在Razor类库中判断应用运行的平台？

一、Blazor Hybrid 平台判断（基于MAUI） #

Blazor Hybrid依托MAUI框架，可直接借助Microsoft.Maui.Essentials中的DeviceInfo类精准获取当前运行平台：

1. 在共享Razor类库中添加对Microsoft.Maui.Essentials的引用
2. 在组件中注入IDeviceInfo实例，通过DeviceInfo.Current.Platform判断平台类型：

@inject IDeviceInfo DeviceInfo

@if (DeviceInfo.Current.Platform == DevicePlatform.Android || DeviceInfo.Current.Platform == DevicePlatform.iOS)
{
    <MobileNavBar />
}
else if (DeviceInfo.Current.Platform == DevicePlatform.Windows || DeviceInfo.Current.Platform == DevicePlatform.macOS)
{
    <DesktopNavBar />
}

这种方式能准确区分移动（Android/iOS）和桌面（Windows/macOS）平台，不受屏幕尺寸影响，完美解决平板误判问题。

二、Blazor Server 平台判断 #

Blazor Server无法直接获取系统平台信息，可通过解析请求的User-Agent字符串判断设备类型：

1. 注入IHttpContextAccessor获取当前请求上下文：

@inject IHttpContextAccessor HttpContextAccessor

@{
    var userAgent = HttpContextAccessor.HttpContext?.Request.Headers["User-Agent"].ToString() ?? string.Empty;
    bool isMobile = IsMobileDevice(userAgent);
}

@if (isMobile)
{
    <MobileNavBar />
}
else
{
    <DesktopNavBar />
}

@code {
    private bool IsMobileDevice(string userAgent)
    {
        // 简单匹配常见移动设备UA关键词，可根据需求扩展正则规则
        var mobileKeywords = new[] { "Android", "iPhone", "iPad", "iPod", "Windows Phone" };
        return mobileKeywords.Any(keyword => userAgent.Contains(keyword, StringComparison.OrdinalIgnoreCase));
    }
}

注意：需在Blazor Server项目的Program.cs中注册IHttpContextAccessor：

builder.Services.AddHttpContextAccessor();

三、跨平台统一判断逻辑（推荐） #

为了在共享类库中实现统一的平台判断逻辑，可封装一个平台检测服务：

1. 定义接口：

public interface IPlatformDetector
{
    bool IsMobile();
}

2. 针对Blazor Hybrid实现：

public class HybridPlatformDetector : IPlatformDetector
{
    private readonly IDeviceInfo _deviceInfo;

    public HybridPlatformDetector(IDeviceInfo deviceInfo)
    {
        _deviceInfo = deviceInfo;
    }

    public bool IsMobile()
    {
        return _deviceInfo.Platform is DevicePlatform.Android or DevicePlatform.iOS;
    }
}

3. 针对Blazor Server实现：

public class ServerPlatformDetector : IPlatformDetector
{
    private readonly IHttpContextAccessor _httpContextAccessor;

    public ServerPlatformDetector(IHttpContextAccessor httpContextAccessor)
    {
        _httpContextAccessor = httpContextAccessor;
    }

    public bool IsMobile()
    {
        var userAgent = _httpContextAccessor.HttpContext?.Request.Headers["User-Agent"].ToString() ?? string.Empty;
        var mobileKeywords = new[] { "Android", "iPhone", "iPad", "iPod", "Windows Phone" };
        return mobileKeywords.Any(keyword => userAgent.Contains(keyword, StringComparison.OrdinalIgnoreCase));
    }
}

4. 在各自项目中注册服务：

   • Hybrid项目：builder.Services.AddSingleton<IPlatformDetector, HybridPlatformDetector>()
   • Server项目：builder.Services.AddSingleton<IPlatformDetector, ServerPlatformDetector>()

5. 在共享组件中使用：

@inject IPlatformDetector PlatformDetector

@if (PlatformDetector.IsMobile())
{
    <MobileNavBar />
}
else
{
    <DesktopNavBar />
}

四、结合Bootstrap的补充调整 #

针对浏览器平台（含Blazor Server和Hybrid中的WebView场景），可在平台判断的基础上，结合Bootstrap媒体查询做补充：

@inject IPlatformDetector PlatformDetector

<div class="@(PlatformDetector.IsMobile() ? "mobile-nav-container" : "desktop-nav-container")">
    @if (PlatformDetector.IsMobile())
    {
        <MobileNavBar />
    }
    else
    {
        <DesktopNavBar />
    }
</div>

<style>
    /* 针对桌面平台，即使屏幕尺寸较小也强制显示桌面导航 */
    .desktop-nav-container {
        display: block !important;
    }
    .mobile-nav-container {
        display: block !important;
    }

    /* 仅在浏览器中，根据屏幕尺寸做 fallback 调整 */
    @media (max-width: 768px) {
        .desktop-nav-container {
            display: none !important;
        }
    }
    @media (min-width: 769px) {
        .mobile-nav-container {
            display: none !important;
        }
    }
</style>

内容的提问来源于stack exchange，提问作者Lukas