在.NET MAUI中如何修改Android WebView的setUseWideViewPort设置

要让MAUI的WebView在Android上尊重网页的viewport设置，你需要通过自定义WebViewHandler访问Android原生的WebSettings，设置UseWideViewPort为true（对应原生的setUseWideViewPort(true)）。以下是具体步骤：

步骤1：创建Android平台的自定义WebViewHandler #

在项目的Platforms/Android文件夹下新建一个类（比如CustomWebViewHandler.cs），代码如下：

using Android.Webkit;
using Microsoft.Maui.Handlers;

namespace YourAppNamespace.Platforms.Android; // 替换成你的应用命名空间

public class CustomWebViewHandler : WebViewHandler
{
    protected override void ConnectHandler(Android.Webkit.WebView platformView)
    {
        base.ConnectHandler(platformView);
        
        // 获取原生WebView的设置
        WebSettings webSettings = platformView.Settings;
        
        // 启用宽视口支持，让viewport设置生效
        webSettings.UseWideViewPort = true;
        
        // 配合设置LoadWithOverviewMode，让网页自适应屏幕宽度
        webSettings.LoadWithOverviewMode = true;
    }
}

步骤2：注册自定义Handler #

打开项目根目录的MauiProgram.cs，在ConfigureMauiHandlers中注册刚才的自定义Handler：

using YourAppNamespace.Platforms.Android; // 引入自定义Handler的命名空间

namespace YourAppNamespace;

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
            })
            .ConfigureMauiHandlers(handlers =>
            {
#if ANDROID
                // 替换默认的WebViewHandler为自定义实现
                handlers.AddHandler<Microsoft.Maui.Controls.WebView, CustomWebViewHandler>();
#endif
            });

        return builder.Build();
    }
}

说明 #

• UseWideViewPort设为true后，WebView会支持网页的viewport宽度设置，不再忽略meta标签。
• LoadWithOverviewMode设为true是可选但推荐的设置，它会让网页以适应屏幕宽度的方式加载，避免横向滚动。
• 这个配置仅对Android平台生效，其他平台不受影响（因为是用#if ANDROID条件编译包裹的）。

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