MAUI WebView在Android端分辨率过低的适配方案咨询

你的问题核心是Android WebView与iOS对viewport缩放属性的解析逻辑不一致：当设置initial-scale=0.5时，Android会将视口宽度计算为device-width * 2，导致内容渲染后看起来像是被压缩到400px宽度，而iOS则按预期处理缩放。以下是几种可以保留viewport标签同时修复Android显示问题的方法：

方法1：针对Android端动态调整viewport内容 #

在MAUI/Xamarin中，通过平台特定代码，仅在Android端加载页面后修改viewport的缩放参数，iOS保持原标签不变：

• MAUI实现：在WebView的Navigated事件中注入JavaScript修改viewport：

  private async void WebView_Navigated(object sender, WebNavigatedEventArgs e)
  {
      #if ANDROID
      var webView = sender as WebView;
      if (webView != null)
      {
          await webView.EvaluateJavaScriptAsync(@"
              var viewportMeta = document.querySelector('meta[name=viewport]');
              if (viewportMeta) {
                  viewportMeta.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no');
              }
          ");
      }
      #endif
  }
  

  如果你需要保留0.5的缩放效果，可以调整JS中的缩放值为适合Android的参数，或者根据设备像素比动态计算。

方法2：改用CSS缩放替代viewport缩放 #

保留标准的viewport设置（width=device-width, initial-scale=1.0, user-scalable=no），然后通过CSS实现页面整体缩放，这样Android和iOS的表现会更一致：

1. 修改viewport标签为：

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

2. 在页面根容器（比如<body>或根div）添加CSS：

   .page-root {
       transform: scale(0.5);
       transform-origin: top left;
       width: 200vw;
       height: 200vh;
       overflow: hidden;
   }
   

   这种方式通过CSS控制缩放，避免了WebView对viewport解析的差异问题。

方法3：配置Android WebView的视口适配属性 #

通过Android平台的WebView设置，强制其正确适配viewport：

• MAUI实现：在项目的MauiProgram.cs中添加WebView的平台映射：

  #if ANDROID
  Microsoft.Maui.Handlers.WebViewHandler.Mapper.AppendToMapping("ViewportFix", (handler, view) =>
  {
      var settings = handler.PlatformView.Settings;
      settings.UseWideViewPort = true; // 允许WebView使用宽视口
      settings.LoadWithOverviewMode = true; // 加载页面时缩放至适应屏幕
  });
  #endif
  

  该设置会让Android WebView忽略viewport中的缩放异常，按设备宽度正确渲染页面。

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