Maui Blazor Hybrid iPhone端Footer未固定到底部问题求助

针对你遇到的iPhone端Footer首次加载悬浮、切换应用后恢复正常的问题，以下是几种可行的解决方法：

1. 改用fixed定位替代absolute #

position: absolute依赖父元素高度计算位置，而fixed直接相对于视口定位，更适合固定底部元素。修改Footer样式：

<div style="position:fixed;bottom:0;width:100%;background:red;height:100px">
    Footer
</div>

2. 强制根元素占满视口高度 #

添加全局基础样式，确保html和body高度覆盖整个视口，避免父容器高度不足导致定位偏移。在wwwroot/css/app.css中写入：

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

3. 首次加载后触发布局刷新 #

通过JS模拟窗口resize事件，强制WebView重新计算视口和元素位置。在Home.razor中添加代码：

@page "/"
@inject IJSRuntime JSRuntime

<h1>Hello, world 2024!</h1>

Welcome to your new app.

<div style="position:fixed;bottom:0;width:100%;background:red;height:100px">
    Footer
</div>

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JSRuntime.InvokeVoidAsync("window.dispatchEvent", new Event("resize"));
        }
        await base.OnAfterRenderAsync(firstRender);
    }
}

4. 配置iOS WebView视口参数 #

在Platforms/iOS/Info.plist中添加或确认以下配置，确保WKWebView正确适配视口：

<key>WKWebViewConfiguration</key>
<dict>
    <key>preferences</key>
    <dict>
        <key>minimumFontSize</key>
        <integer>10</integer>
    </dict>
</dict>

这些方法可解决iPhone端WebView首次加载时视口计算不准确的问题，让Footer正常固定在底部。

内容的提问来源于stack exchange，提问作者Niels 2000