0

Blazor Webassembly ASP.NET Core でホストされた Web サイトを Azure App Service に発行したところ、ラップトップ ブラウザーで期待どおりに動作しました。ただし、モバイル (iOS Safari) で移動すると、Pages のみが表示され、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>

アプリカミソリ

<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 ブラウザのスクリーンショット

モバイル サファリ ブラウザのスクリーンショット

1 つ目は、ラップトップの Chrome ブラウザーでのスクリーンショットです。2 番目は、モバイル サファリ ブラウザのスクリーンショットです。

編集

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 に答える