.NET MAUI WebView在iOS平台上的字体大小异常问题解析

2025-05-09 19:13:38作者：冯爽妲Honey

在.NET MAUI应用开发中，WebView控件是展示HTML内容的常用组件。然而，开发者在iOS平台上使用contenteditable属性时可能会遇到一个特殊的字体渲染问题。

问题现象

当开发者在iOS设备上使用MAUI WebView展示可编辑HTML内容时（即设置了<body contenteditable="true">），会观察到以下异常行为：

初始渲染时，文本字体大小显示异常（通常比预期小）
当用户点击WebView获取焦点后，字体大小会突然变化
这种视觉跳跃在富文本编辑场景中尤为明显

值得注意的是，这个问题仅出现在iOS平台，Android、Windows和macOS Catalyst上表现正常。

技术背景

这个问题的根源在于iOS的WKWebView对可编辑内容的特殊处理机制。iOS的WebKit引擎在处理可编辑区域时，会应用一套特殊的渲染逻辑：

初始渲染阶段，系统会使用默认的字体大小设置
当获得焦点进入编辑状态时，WebKit会重新计算并应用更适合编辑的字体大小
这种自动调整行为是WKWebView的固有特性

解决方案

针对这个问题，开发者可以通过添加viewport元标签来控制视图的缩放行为：

<meta name='viewport' content='user-scalable=no' />

完整的实现代码如下：

var htmlSource = new HtmlWebViewSource
{
    Html = @"
        <html>
            <head>
                <meta name='viewport' content='user-scalable=no' />
            </head>
            <body contenteditable='true'>
                <h1>标题</h1>
                <p>可编辑内容</p>
            </body>
        </html>"
};
MyWebView.Source = htmlSource;