移动设备无法正确呈现 Azure App Service Blazor Webassembly（ASP.NET 托管）

Question

我发布了一个 Blazor Webassembly ASP.NET 核心托管网站到 Azure 应用服务，它在笔记本电脑浏览器上按预期工作。但是，如果我在移动设备 (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 模拟器在运行开发模式下运行完美。然而，在我的 phone 上发布它并没有导航到它。跟以前一模一样

Answer 1

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

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

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

Answer 2

LoginDisplay 组件未呈现的原因实际上是 Henk 提到的。但是，我不得不删除整个部分说：

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

移动设备无法正确呈现 Azure App Service Blazor Webassembly（ASP.NET 托管）

Mobile Renders Incorrectly Azure App Service Blazor Webassembly (ASP.NET Hosted)

c#

asp.net-core

blazor

mobile-safari

blazor-webassembly