.NET MAUI WebView在iOS与Android上表现不一致问题排查

1. Android WebView User-Agent 配置问题 #

Android端的WebView默认User-Agent未携带移动设备特征标识，导致目标网站无法识别为移动设备，进而返回桌面版页面——而Chrome移动端的UA包含了移动设备信息，所以网站能正确返回适配页面。

解决方法：在Android平台自定义WebView的User-Agent，模拟Chrome移动端的UA，要确保在WebView加载URL前完成配置：

#if ANDROID
var webViewMapper = Microsoft.Maui.Controls.Handlers.WebViewHandler.Mapper;
webViewMapper.AppendToMapping("CustomMobileUA", (handler, view) =>
{
    var androidWebView = handler.PlatformView;
    // 替换为对应设备的Chrome移动端UA，示例为Android 13设备的UA
    string mobileUA = "Mozilla/5.0 (Linux; Android 13; SM-G998B) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Mobile Safari/537.36";
    androidWebView.Settings.UserAgentString = mobileUA;
});
#endif

2. WebView 视口适配与布局调整 #

部分网站依赖页面视口设置实现移动端适配，你可以通过注入JavaScript强制修正视口，同时调整WebView的布局属性确保占满可用空间：

1. 先修改XAML中WebView的布局属性，将VerticalOptions改为FillAndExpand，避免居中导致的空间浪费：

<StackLayout Margin="10">
    <WebView x:Name="wv" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" 
             MinimumHeightRequest="1000" MinimumWidthRequest="20" Navigated="Wv_Navigated"/>
</StackLayout>

2. 在Navigated事件中注入视口适配的JS：

private void Wv_Navigated(object sender, WebNavigatedEventArgs e)
{
    var webView = sender as WebView;
    _ = webView.EvaluateJavaScriptAsync(@"
        let viewport = document.querySelector('meta[name=""viewport""]');
        if (viewport) {
            viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no');
        } else {
            let meta = document.createElement('meta');
            meta.name = ""viewport"";
            meta.content = ""width=device-width, initial-scale=1.0"";
            document.head.appendChild(meta);
        }
    ");
}

3. WebView宽高显示-1的说明 #

wv.Height和wv.Width为-1是正常现象，因为页面初始化阶段WebView还未完成布局测量（Measure/Arrange流程），此时控件的实际尺寸尚未确定。如果需要获取实际宽高，可监听SizeChanged事件：

public YourPage()
{
    InitializeComponent();
    wv.SizeChanged += Wv_SizeChanged;
}

private void Wv_SizeChanged(object sender, EventArgs e)
{
    var webView = sender as WebView;
    if (webView.Width > 0 && webView.Height > 0)
    {
        double actualWidth = webView.Width;
        double actualHeight = webView.Height;
        // 获取到尺寸后可移除事件避免重复触发
        wv.SizeChanged -= Wv_SizeChanged;
    }
}

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