Blazor Server端应用如何创建/检测特定手机布局与设计

一、完善自定义屏幕尺寸检测逻辑 #

你的核心思路可行，但DetectScreenOrPhone需要结合JS互操作才能获取客户端屏幕信息，同时要处理窗口 resize 事件确保布局能实时响应尺寸变化：

1. 在项目wwwroot目录下新建screenUtils.js文件：

window.screenUtils = {
    getScreenWidth: () => window.innerWidth,
    addResizeListener: (dotNetRef) => {
        window.addEventListener('resize', () => {
            dotNetRef.invokeMethodAsync('OnScreenResized', window.innerWidth);
        });
    }
};

2. 改造你的组件代码：

@page "/courses"
@inject IJSRuntime JSRuntime
@implements IDisposable

@if (_isPhoneOrSmallScreen)
{
    <CoursePagePhoneLayout/>
}
else
{
    <CoursePagePCLayout/>
}

@code {
    private bool _isPhoneOrSmallScreen = false;
    private DotNetObjectReference<CoursesPage>? _dotNetRef;
    // 可根据需求调整移动端断点阈值
    private const int MobileBreakpoint = 768;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            _dotNetRef = DotNetObjectReference.Create(this);
            // 初始获取屏幕宽度并更新布局状态
            var width = await JSRuntime.InvokeAsync<int>("screenUtils.getScreenWidth");
            UpdateLayoutState(width);
            // 绑定窗口 resize 监听
            await JSRuntime.InvokeVoidAsync("screenUtils.addResizeListener", _dotNetRef);
        }
    }

    [JSInvokable]
    public void OnScreenResized(int width)
    {
        UpdateLayoutState(width);
        StateHasChanged();
    }

    private void UpdateLayoutState(int width)
    {
        _isPhoneOrSmallScreen = width <= MobileBreakpoint;
    }

    public void Dispose()
    {
        _dotNetRef?.Dispose();
    }
}

二、用MudBlazor官方MudHidden组件更省心 #

既然你在研究MudHidden，这个组件是MudBlazor原生提供的断点适配工具，完全不用自己写媒体查询或JS监听，直接对接官方定义的断点（xs、sm、md、lg、xl）：

@page "/courses"

<!-- 移动端布局：屏幕小于lg断点时显示 -->
<MudHidden Breakpoint="Breakpoint.LgUp">
    <CoursePagePhoneLayout/>
</MudHidden>

<!-- PC端布局：屏幕大于等于lg断点时显示 -->
<MudHidden Breakpoint="Breakpoint.SmDown">
    <CoursePagePCLayout/>
</MudHidden>

MudBlazor的预设断点参数：

• Breakpoint.Xs：屏幕宽度 <576px
• Breakpoint.Sm：576px ≤ 宽度 <768px
• Breakpoint.Md：768px ≤ 宽度 <992px
• Breakpoint.Lg：992px ≤ 宽度 <1200px
• Breakpoint.Xl：宽度 ≥1200px

你可以根据布局需求调整Breakpoint参数，比如想在屏幕小于992px时显示移动端布局，就把第一个MudHidden的Breakpoint设为Breakpoint.LgUp，第二个设为Breakpoint.MdDown。

两种方案对比 #

• 自定义JS监听：会动态卸载/加载组件，适合初始化较重的组件，能节省资源，但需要自己维护监听逻辑。
• MudHidden：写法简洁，贴合MudBlazor生态，通过CSS控制显示隐藏，但组件不会被卸载，适合轻量组件场景。

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