如何在MAUI应用中让WebView内容自适应容器尺寸？

核心思路 #

直接加载第三方视频页面（如YouTube Shorts）时，页面自带的视口布局会导致内容溢出WebView容器。最优方案是通过自定义HTML包裹视频，强制网页适配WebView尺寸，同时调整WebView的布局约束，让它自动填充父容器空间。

具体实现步骤 #

1. 修改WebView布局约束（取消硬编码尺寸） #

在XAML中调整WebView的布局属性，让它自动填充父容器，无需手动计算设备尺寸：

<WebView 
    x:Name="WebView"
    HorizontalOptions="FillAndExpand"
    VerticalOptions="FillAndExpand"
    Margin="5,0,5,0"/>

同时移除后台代码中硬设置的HeightRequest和WidthRequest，避免固定尺寸限制。

2. 用自定义HTML包裹视频 #

通过自定义HTML嵌入视频iframe，添加视口标签强制网页适配WebView容器，同时禁止用户缩放：

private async void OnCounterClicked(object sender, EventArgs e)
{
    WebView.IsVisible = true;

    // 自定义HTML内容，适配WebView尺寸
    var htmlContent = @"
<!DOCTYPE html>
<html>
<head>
    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'>
    <style>
        body { margin: 0; padding: 0; }
        iframe { width: 100%; height: 100%; border: none; }
    </style>
</head>
<body>
    <iframe src='https://www.youtube.com/embed/JSIqFdb4KQ8' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe>
</body>
</html>";

    WebView.Source = new HtmlWebViewSource { Html = htmlContent };

    for (int i = 0; i < 2; i++)
    {
        await CloseBtn.RotateTo(180, 200);
        await CloseBtn.RotateTo(0, 200);
    }
}

注意：将YouTube Shorts链接转换为embed格式（替换shorts为embed），确保视频能以iframe正常加载。

3. 平台额外配置（可选） #

如果自定义HTML方案在部分平台仍有问题，可通过自定义渲染器增强控制：

• Android平台：在Platforms/Android下添加自定义渲染器，开启视口适配

[assembly: ExportRenderer(typeof(WebView), typeof(CustomWebViewRenderer))]
namespace MauiApp2.Platforms.Android
{
    public class CustomWebViewRenderer : WebViewRenderer
    {
        public CustomWebViewRenderer(Context context) : base(context) { }

        protected override void OnElementChanged(ElementChangedEventArgs<WebView> e)
        {
            base.OnElementChanged(e);
            if (Control != null)
            {
                Control.Settings.LoadWithOverviewMode = true;
                Control.Settings.UseWideViewPort = true;
                Control.Settings.JavaScriptEnabled = true;
            }
        }
    }
}

• iOS平台：在Platforms/iOS下添加自定义渲染器，开启页面缩放适配

[assembly: ExportRenderer(typeof(WebView), typeof(CustomWebViewRenderer))]
namespace MauiApp2.Platforms.iOS
{
    public class CustomWebViewRenderer : WebViewRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<WebView> e)
        {
            base.OnElementChanged(e);
            if (Control != null)
            {
                Control.ScalesPageToFit = true;
            }
        }
    }
}

完整调整后代码 #

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="MauiApp2.MainPage">

    <Grid 
        x:Name="MainGrid"
        RowDefinitions="50,*" 
        ColumnDefinitions="*">
               
        <Button 
            Grid.Row="0"
            Grid.Column="0"
            x:Name="CounterBtn"
            HeightRequest="40"
            Text="Click me"
            Clicked="OnCounterClicked"
            HorizontalOptions="Center" />

        <VerticalStackLayout 
            Grid.Row="1"
            Grid.Column="0"
            Spacing="25"
            Padding="30,0">

            <Border 
                Stroke="Black" 
                StrokeThickness="3"
                x:Name="WebBorder">

                <Border.StrokeShape>
                    <RoundRectangle CornerRadius="5" />
                </Border.StrokeShape>

                <VerticalStackLayout 
                    BackgroundColor="White"
                    HorizontalOptions="FillAndExpand"
                    VerticalOptions="FillAndExpand">

                    <Image 
                        x:Name="CloseBtn" 
                        Margin="5,5,0,0"
                        HorizontalOptions="Start" 
                        Source="close_button.png">
                            <Image.GestureRecognizers>
                                <TapGestureRecognizer Tapped="CloseButton_Clicked"/>
                            </Image.GestureRecognizers>
                        </Image>

                    <WebView 
                        x:Name="WebView"
                        HorizontalOptions="FillAndExpand"
                        VerticalOptions="FillAndExpand"
                        Margin="5,0,5,0"/>
                </VerticalStackLayout>
            </Border>

        </VerticalStackLayout>
    </Grid>

</ContentPage>

后台代码 #

private async void OnCounterClicked(object sender, EventArgs e)
{
    WebView.IsVisible = true;

    var htmlContent = @"
<!DOCTYPE html>
<html>
<head>
    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'>
    <style>
        body { margin: 0; padding: 0; }
        iframe { width: 100%; height: 100%; border: none; }
    </style>
</head>
<body>
    <iframe src='https://www.youtube.com/embed/JSIqFdb4KQ8' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe>
</body>
</html>";

    WebView.Source = new HtmlWebViewSource { Html = htmlContent };

    for (int i = 0; i < 2; i++)
    {
        await CloseBtn.RotateTo(180, 200);
        await CloseBtn.RotateTo(0, 200);
    }
}

private void CloseButton_Clicked(object sender, EventArgs e)
{
    WebView.IsVisible = false;
}

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