时间戳

首页 > 解决方案 > Xamarin Forms：如何增加 webview 中内容的字体大小？

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

问题描述

我正在使用 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 数据。

标签： htmlxamarin.formswebview

解决方案

您可以使用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;
            }

        }

    }
}

推荐阅读