移动呈现不正确 Azure App Service Blazor Webassembly（ASP.NET 托管）答案

【问题标题】：Mobile Renders Incorrectly Azure App Service Blazor Webassembly (ASP.NET Hosted)移动呈现不正确 Azure App Service Blazor Webassembly（ASP.NET 托管）
【发布时间】：2020-10-18 09:20:47
【问题描述】：

我向 Azure 应用服务发布了一个 Blazor Webassembly ASP.NET Core 托管网站，它在笔记本电脑浏览器上按预期工作。但是，如果我在移动设备（iOS Safari）上导航到它，它似乎只显示我的页面而不是我的 MainLayout.Razor 文件 - 也就是说，不显示。为什么会这样？谢谢

index.html 文件

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>My Blazor App</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
    <script src="_content/BlazorContentEditable/BlazorContentEditable.js"></script>
    <link href="manifest.json" rel="manifest" />
    <link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" />
</head>

<body>
    <app>Loading...</app>
    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">????</a>
    </div>
    <script src="_framework/blazor.webassembly.js"></script>
</body>

</html>

App.razor

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <CascadingAuthenticationState>
            <LayoutView Layout="@typeof(MainLayout)">
                <p>Sorry, there's nothing at this address.</p>
            </LayoutView>
        </CascadingAuthenticationState>
    </NotFound>
</Router>

MainLayout.razor

@inherits LayoutComponentBase

<div class="main">
    <div class="top-row px-4">
        <LoginDisplay />
    </div>

    <div class="content px-4">
        @Body
    </div>
</div>

LoginDisplay.razor

<AuthorizeView>
    <Authorized>
        <h1>Hello, @context.User.Identity.Name!</h1>
        <a href="LogOut">Log out</a>
    </Authorized>
    <NotAuthorized>
        <a href="/">Home</a>
        <a href="Register">Register</a>
        <a href="Login">Log in</a>
    </NotAuthorized>
</AuthorizeView>

首先是笔记本电脑 chrome 浏览器上的屏幕截图。二是手机Safari浏览器截图

编辑

现在在玩了一下 app.css 文件之后，使用以下设置：

@media (max-width: 767.98px) {
    .main .top-row {
        display: flex;
        justify-content: space-between;
        padding: 5px 0;
    }

    .image {
        width: 100%;
        height: 100%;
    }

    .main .top-row a, .main .top-row .btn-link {
        display: flex;
        margin-left: 0;
        justify-content: space-between;
        padding: 5px 0;
    }
    
}

iPhone SE 模拟器在开发模式下运行时可以完美运行。然而，发布它并没有在我的手机上导航到它。它看起来和以前完全一样。

【问题讨论】：

不完全清楚。侧边菜单应该折叠，但仍然应该有一个带有菜单按钮的顶栏。添加屏幕截图。还可以使用 F12 工具在 PC 上的手机大小的浏览器中运行它。
我添加了截图。我已经去掉了模板中的默认侧边菜单。

标签： c# asp.net-core blazor mobile-safari blazor-webassembly

【解决方案1】：

在默认的site.css（或app.css）中我们有

@media (max-width: 767.98px) {
    .main .top-row:not(.auth) {
        display: none;
    }

所以我想你应该删除那里的.top-row:not(.auth) 部分。

【讨论】：

我取出那部分并重新发布，但最上面一行仍然没有显示在 safari 上。
在 CSS 更新后总是强制刷新（-：通常是 Ctrl+F5。
好吧，你的建议似乎让我朝着正确的方向前进，但现在我得到了相当奇怪和不一致的结果。一会儿我再发个帖子解释一下。
再次检查我的帖子，我添加了我的编辑和结果。

【解决方案2】：

为什么 LoginDisplay 组件没有渲染的答案实际上是 Henk 提到的。但是，我不得不删除整个部分：

   .main .top-row:not(.auth) {
       display: none;
   }

【讨论】：