0

我向 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>

登录显示.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 浏览器截图

首先是笔记本电脑 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 模拟器在开发模式下运行时完美运行。然而，发布它并没有在我的手机上导航到它。它看起来和以前完全一样。

4

2 回答 2

1

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

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

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

于 2020-06-28T13:52:04.420 回答
0

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

   .main .top-row:not(.auth) {
       display: none;
   }
于 2020-07-04T18:59:42.203 回答