[SOLVED] .NET MAUI: How to set the font family and font size for a custom Webview renderer

.NET MAUI: How to set the font family and font size for a custom Webview renderer

I am using a custom WebView to display HTML content in a .NET MAUI application. I need to set the font family and font size for Webview. I have implemented font size adjustments, and it works on iPhone, but the font size is not working on iPad. How can I set the font family and font size for a custom Webview? Below, I am adding the renderer class code.

Renderer class:

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);
        }
    }
}

Solution

That's an iPad issue, which also exists in iOS native. A workaround is to add settings in the OnElementChanged method,

    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);

        }

Hope it helps!