Xamarin Forms：如何增加 webview 中内容的字体大小？答案

【问题标题】：Xamarin Forms: How to increase the fontsize of content in webview?Xamarin Forms：如何增加 webview 中内容的字体大小？
【发布时间】：2020-10-01 00:21:58
【问题描述】：

我正在使用 webview 来显示 HTML 数据。在将数据设置为 webview 的源之前，我正在修改 HTML 数据，如下所示。

我的代码：

<WebView
    VerticalOptions="FillAndExpand"
    x:Name="webview">
</WebView>

string data = PrepareHtml(htmldata);
var content = new HtmlWebViewSource
{
    Html = data
};
webview.Source = content;

public string PrepareHtml(string html)
{
    string resul = "";
    string tmp = html;
    resul = resul + " <html> ";
    resul = resul + " <heder> ";
    resul = resul + " <style> ";
    resul = resul + " li{ ";
    resul = resul + " list-style-type: none; ";
    resul = resul + " display: inline-block; ";
    resul = resul + " } ";
    resul = resul + " li.ver{ list-style-type: none !important; ";
    resul = resul + " display: inline !important; ";
    resul = resul + " margin-right:10px !important; ";
    resul = resul + " color: black; } ";
    resul = resul + " li.ver:before { ";
    resul = resul + " content: \"\\A\"; ";
    resul = resul + " white-space:pre; }";
    resul = resul + " </style>";
    resul = resul + " </header>";
    resul = resul + " <body> ";

    tmp = tmp.Replace("<p", "<ul").Replace("</p>", "</ul>");
    tmp = tmp.Replace("<span", "<li").Replace("</span>", "</li>");

    resul = resul + tmp + "</body></html>";
    return resul;
}

截图

我需要增加 webview 中内容的字体大小。我该怎么做？

我在这里添加了捏缩放功能，但初始字体大小非常小。添加示例 HTML 数据here。

【问题讨论】：

@LucasZhang-MSFT 是的，它按预期工作，谢谢

标签： html xamarin.forms webview

【解决方案1】：

您可以使用 Custom Renderer 通过 JS 重新设置 FontSize。

iOS

using System;

using Foundation;
using UIKit;

using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
using App13;
using App13.iOS;
using WebKit;

[assembly:ExportRenderer(typeof(WebView),typeof(MyWebViewRenderer))]
namespace App13.iOS
{
    public class MyWebViewRenderer: WkWebViewRenderer
    {

        protected override void OnElementChanged(VisualElementChangedEventArgs e)
        {
            base.OnElementChanged(e);

            if (e.NewElement != null)
            {
                this.NavigationDelegate = new NavigationDelegat();

            }
        }
    }


    public class NavigationDelegat : WKNavigationDelegate
    {
        public override void DidFinishNavigation(WKWebView webView, WKNavigation navigation)
        {
            string fontSize = "300%"; // 300% is the size of font , set it as you want like 200% or 150%
            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);

        }
    }
}

安卓


using Android.Content;

using App13.Droid;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: ExportRenderer(typeof(Xamarin.Forms.WebView), typeof(MyWebViewRenderer))]
namespace App13.Droid
{
    public class MyWebViewRenderer : WebViewRenderer
    {
        public MyWebViewRenderer(Context context) : base(context)
        {
        }

        protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.WebView> e)
        {
            base.OnElementChanged(e);

            if(e.NewElement !=null)
            {
                Control.Settings.DefaultFontSize = 30;
            }

        }

    }
}

【讨论】：