主页 / coding / 问题 / 79435987
Accepted
Matthew Pans
Asked: 2025-02-13 19:25:34 +0800 CST

.NET MAUI：如何设置自定义 Webview 渲染器的字体系列和字体大小

  • 772

我正在使用自定义 WebView 在 .NET MAUI 应用程序中显示 HTML 内容。我需要为 Webview 设置字体系列和字体大小。我已经实现了字体大小调整，它在 iPhone 上有效，但字体大小在 iPad 上不起作用。如何为自定义 Webview 设置字体系列和字体大小？下面，我添加了渲染器类代码。

渲染器类：

public class MyWebViewRenderer : ViewRenderer<MyWebView, WKWebView>
{
    WKWebView _wkWebView;

    protected override void OnElementChanged(ElementChangedEventArgs<MyWebView> e)
    {
        base.OnElementChanged(e);

        if (Control == null)
        {
            var config = new WKWebViewConfiguration();
            config.AllowsInlineMediaPlayback = true;
            _wkWebView = new WKWebView(Frame, config);
            //transparent background
            _wkWebView = new WKWebView(CGRect.Empty, config);
            _wkWebView.BackgroundColor = UIColor.Clear;
            _wkWebView.ScrollView.BackgroundColor = UIColor.Clear;
            _wkWebView.ScrollView.ScrollEnabled = false;
            _wkWebView.Opaque = false;
            _wkWebView.NavigationDelegate = new MyNavigationDelegate();
            SetNativeControl(_wkWebView);
            
        }
        //if (e.NewElement != null)
        //{
        //    Control.LoadHtmlString(Element.Url, null);   //use this code instead
        //    //Control.LoadRequest(new NSUrlRequest(new NSUrl(Element.Url)));
        //}
    }

    public class MyNavigationDelegate : WKNavigationDelegate
    {
        public override void DidFinishNavigation(WKWebView webView, WKNavigation navigation)
        {
            string fontSize = "";
            if (Device.Idiom == TargetIdiom.Phone)
            {
                fontSize = "500%"; // > 100% shows larger than previous
            }
            else if (Device.Idiom == TargetIdiom.Tablet)
            {
                fontSize = "750%"; // > 100% shows larger than previous
            }

            string stringsss = String.Format(@"document.getElementsByTagName('body')[0].style.webkitTextSizeAdjust= '{0}'", fontSize);
            WKJavascriptEvaluationResult handler = (NSObject result, NSError err) =>
            {
                if (err != null)
                {
                    System.Console.WriteLine(err);
                }
                if (result != null)
                {
                    System.Console.WriteLine(result);
                }
            };
            webView.EvaluateJavaScript(stringsss, handler);
            //base.DidFinishNavigation(webView, navigation);
        }

    }

    protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
    {
        base.OnElementPropertyChanged(sender, e);

        if (e.PropertyName == "Url")
        {
            //string headerString = "<header><meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0, user-scalable=no'><style>img{max-width:50%}</style></header>";
            ////string bodyString = "<html><body><h1>Xamarin.Forms</h1><p>Welcome to WebView.</p><video src='movie.ogg'controls='controls'></video></body></html>";
            //string finalHtml = headerString + Element.Url;
            //Control.LoadHtmlString(finalHtml, null);

            string finalHtml = Element.Url.Replace("width=\"640\"", "width=\"1000\"");
            Control.LoadHtmlString(finalHtml, null);
            //Control.LoadHtmlString(Element.Url, null);
        }
    }
}
webview

1 个回答

  1. Best Answer

    这是 iPad 的问题，iOS 原生也存在这个问题。解决方法是在方法中添加设置OnElementChanged，

        protected override void OnElementChanged(ElementChangedEventArgs<MyWebView> e)
    {
        base.OnElementChanged(e);

        if (Control == null)
        {
            ...
          if (Device.Idiom == TargetIdiom.Tablet){
            //when targeting on iPad, add this to force the iPad behavior
            _wkWebView.Configuration.DefaultWebpagePreferences.PreferredContentMode = WKContentMode.Mobile;
            }
            SetNativeControl(_wkWebView);

        }

    希望有帮助！

    • 1

相关问题