WebView text too small cannot make bigger XForms (4.8)

问题

wondering if anyone can help, the text on the webView is too small, I have an HTML that I have NO control over. How can I increase the size?

I have tried Xamarin forms: Webview content default size is too small

but did not work for me as the page does not load at all.

Is this a bug? Am I missing something? Any suggestions

  <WebView VerticalOptions="FillAndExpand" 
            HorizontalOptions="FillAndExpand">               
           <WebView.Source>
         <HtmlWebViewSource
        Html="{Binding HtmlSource}" />
</WebView.Source>
</WebView>


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

[assembly: ExportRenderer(typeof(WebView), typeof(MyWebViewRenderer))]
namespace MyCompany
{
    
    public class MyWebViewRenderer : ViewRenderer<WebView, WKWebView>
    {
        WKWebView wkWebView;

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

            if (Control != null) return;
            var config = new WKWebViewConfiguration();
            wkWebView = new WKWebView(Frame, config) {NavigationDelegate = new MyNavigationDelegate()};
            SetNativeControl(wkWebView);
        }
    }
}
public class MyNavigationDelegate : WKNavigationDelegate
{
    public override void DidFinishNavigation(WKWebView webView, WKNavigation navigation)
    {
        string fontSize = "200%"; 
        string stringHtml = 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(stringHtml, handler);
    }
}

回答1:

The viewport element on a page

<meta name="viewport" content="width=device-width, initial-scale=1.0">

can be set with a renderer (omitting initial-scale):

using Foundation;
using WebKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
using MyNamespace.iOS.Renderers;

[assembly: ExportRenderer(typeof(WebView), typeof(MyWebViewRenderer))]
namespace MyNamespace.iOS.Renderers
{
  //'WebViewRenderer' is obsolete: 'WebViewRenderer is obsolete as of 4.4.0. Please use the WkWebViewRenderer instead'
  //WkWebViewRenderer inherits from WKWebView
  public class MyWebViewRenderer : WkWebViewRenderer
  {
    protected override void OnElementChanged(VisualElementChangedEventArgs e)
    {
        base.OnElementChanged(e);

        if (e.NewElement != null)
        {
            WebView webView = Element as WebView;
            webView.VerticalOptions = LayoutOptions.FillAndExpand;

            string jScript = @"var meta = document.createElement('meta'); " +
                "meta.setAttribute('name', 'viewport');" +
                "meta.setAttribute('content', 'width=device-width');" +
                "document.getElementsByTagName('head')[0].appendChild(meta);";

            //WKUserScriptInjectionTime should be AtDocumentEnd
            var userScript = new WKUserScript((NSString)jScript, WKUserScriptInjectionTime.AtDocumentEnd, true);

            WKWebView wkWebView = this;
            WKWebViewConfiguration wkWebViewConfig = wkWebView.Configuration;
            wkWebViewConfig.UserContentController.AddUserScript(userScript);
        }
    }
  }
}

See also "Using the viewport meta tag to control layout on mobile browsers" for a closer description on screen size, pixel scale, device orientation and zoom.

Note: The meta tag seems to be set as follows in Safari in an iPad/iPhone simulator:

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

来源：https://stackoverflow.com/questions/63336710/webview-text-too-small-cannot-make-bigger-xforms-4-8

标签

Xamarin

xamarin.forms

xamarin.ios