MAUI.NET WebView嵌入响应式网站布局错乱问题求助

问题背景 #

刚接触移动应用开发，正在学习MAUI.NET，目标是将已实现响应式的网站嵌入MAUI WebView，开发可分发至Android和iOS的应用。测试用MainPage.xaml代码如下：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="POCMobileApp.MainPage">
    <WebView x:Name="browser" Source="https://www.google.it"></WebView> <!-- google link is only for test -->
</ContentPage>

遇到的问题：该网站在Android谷歌Chrome浏览器中显示正常，所有控件位置正确，但在MAUI应用的WebView中打开时，所有控件位置错乱。
补充说明：移动端浏览器显示布局正常，Android模拟器中WebView内的控件出现错位。

解决方法 #

1. 配置WebView的User-Agent模拟移动端Chrome #

MAUI WebView默认的User-Agent与移动端Chrome存在差异，部分响应式网站会根据UA判断设备类型并加载对应布局。可在页面后台代码中设置自定义UA：

protected override void OnAppearing()
{
    base.OnAppearing();
    // 模拟Android Chrome的UA（可根据目标设备调整版本号）
    browser.UserAgent = "Mozilla/5.0 (Linux; Android 13; SM-G998B) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Mobile Safari/537.36";
}

2. 启用JavaScript并配置WebView基础布局属性 #

响应式网站大多依赖JavaScript实现布局适配，需确保WebView启用JS，同时设置布局填充整个页面：

<WebView x:Name="browser" Source="https://www.google.it"
         JavaScriptEnabled="True"
         DomStorageEnabled="True"
         HorizontalOptions="FillAndExpand"
         VerticalOptions="FillAndExpand"></WebView>

3. 确认目标网站的视口Meta标签配置 #

检查嵌入网站的HTML头部是否包含正确的视口设置，这是响应式布局生效的核心：

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

4. Android平台自定义WebView配置（进阶方案） #

若上述方法无效，可针对Android平台自定义WebView的底层设置：

1. 在Platforms/Android/Resources/layout目录下创建CustomWebView.axml：

<?xml version="1.0" encoding="utf-8"?>
<WebView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/webView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scrollbars="none"/>

2. 创建自定义渲染器CustomWebViewRenderer.cs：

using Android.Webkit;
using Microsoft.Maui.Platform;
using POCMobileApp.Platforms.Android;

[assembly: Microsoft.Maui.Controls.Compatibility.Renderers.Renderer(typeof(Microsoft.Maui.Controls.WebView), typeof(CustomWebViewRenderer))]
namespace POCMobileApp.Platforms.Android
{
    public class CustomWebViewRenderer : WebViewRenderer
    {
        public CustomWebViewRenderer(Context context) : base(context)
        {
        }

        protected override void OnElementChanged(ElementChangedEventArgs<Microsoft.Maui.Controls.WebView> e)
        {
            base.OnElementChanged(e);
            if (Control != null)
            {
                var settings = Control.Settings;
                settings.JavaScriptEnabled = true;
                settings.DomStorageEnabled = true;
                settings.UseWideViewPort = true;
                settings.LoadWithOverviewMode = true;
                settings.SetSupportZoom(true);
                settings.BuiltInZoomControls = false;
                // 配置匹配移动端Chrome的UA
                settings.UserAgentString = "Mozilla/5.0 (Linux; Android 13; SM-G998B) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Mobile Safari/537.36";
            }
        }
    }
}

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