MAUI中使用WebView实现HTML页面适配设备屏幕尺寸

1. 优先修复HTML页面的响应式适配 #

静态页面出现滚动条的核心原因大多是未做响应式适配，必须在HTML的<head>标签中添加viewport元标签：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

• width=device-width：强制页面宽度匹配设备屏幕宽度
• initial-scale=1.0：初始缩放比例为100%
• user-scalable=no：禁止用户手动缩放，避免触发滚动

同时检查HTML内的固定宽度元素，将硬编码的宽度值（如width: 1200px）替换为width: 100%或max-width: 100%，确保所有元素不会超出屏幕边界。

2. 配置MAUI WebView的布局属性 #

放弃使用MaximumHeightRequest和MaximumWidthRequest，改用以下布局配置让WebView占满父容器并禁用自身滚动：

<WebView 
    Source="path/to/your/static-page.html"
    HorizontalOptions="FillAndExpand"
    VerticalOptions="FillAndExpand"
    IsScrollEnabled="False" />

• FillAndExpand：让WebView填充父容器的可用空间
• IsScrollEnabled="False"：关闭WebView自带的滚动功能，避免和页面内部滚动冲突（前提是HTML已适配完成）

3. 平台特定的增强配置（可选） #

如果上述步骤仍未解决问题，可针对Android/iOS添加平台专属配置：

Android端

在Platforms/Android/MainActivity.cs中添加WebView的自适应设置：

protected override void OnCreate(Bundle savedInstanceState)
{
    base.OnCreate(savedInstanceState);
    Microsoft.Maui.Handlers.WebViewHandler.Mapper.AppendToMapping("CustomWebView", (handler, view) =>
    {
        var androidWebView = handler.PlatformView;
        androidWebView.Settings.LoadWithOverviewMode = true;
        androidWebView.Settings.UseWideViewPort = true;
    });
}

iOS端

在Platforms/iOS/AppDelegate.cs中开启页面缩放适配：

protected override void OnConfiguredServices(IServiceCollection services)
{
    base.OnConfiguredServices(services);
    Microsoft.Maui.Handlers.WebViewHandler.Mapper.AppendToMapping("CustomWebView", (handler, view) =>
    {
        var iosWebView = handler.PlatformView;
        iosWebView.ScalesPageToFit = true;
    });
}

内容的提问来源于stack exchange，提问作者arun rastogi