WebView 文本太小不能制作更大的 XForms (4.8) [英] WebView text too small cannot make bigger XForms (4.8)

问题描述

想知道是否有人可以提供帮助，webView 上的文本太小，我有一个无法控制的 HTML.如何增加尺寸?

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?

我尝试过 Xamarin 表单:Webview内容默认大小太小

但对我不起作用，因为页面根本无法加载.

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

推荐答案

viewport 页面上的元素

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

可以用渲染器设置(省略initial-scale):

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.

注意:在 iPad/iPhone 模拟器的 Safari 中，meta 标签似乎设置如下:

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">

这篇关于WebView 文本太小不能制作更大的 XForms (4.8)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！