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

0
votes

I published a Blazor Webassembly ASP.NET Core hosted website to Azure App Service and it works as expected on laptop browsers. However, if I navigate to it on mobile (iOS Safari) it seems to only display my Pages and not my MainLayout.Razor file- that is, the doesn't show. Why is this the case? Thanks

index.html file

<!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>

Screenshot on laptop chrome browser

Screenshot on mobile safari browser

First is screenshot on laptop chrome browser. Second is screenshot on mobile safari browser

EDIT

Now after playing around with the app.css file a bit, with these settings:

@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;
    }
    
}

enter image description here

The iPhone SE emulator works perfectly when running in dev mode. Yet, publishing it does nothing navigating to it on my phone. It looks exactly the same as before.

2
c#asp.net-coreblazormobile-safariblazor-webassembly
Not entirely clear. The side menu should collapse but there should still be a top-bar with a menu button. Add a screenshot. Also use the F12 tools to run it in a phone-sized browser on your PC. – Henk Holterman
I added the screenshots. I had taken out the default side menu in the template. – amdorsey12

2 Answers

1
votes

In the default site.css (or app.css) we have

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

so i guess you should just remove the .top-row:not(.auth) part there.

0
votes

The answer to why the LoginDisplay component wasn't rendering was in fact what Henk mentioned. However, I had to eliminate the entire section that said:

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