Forum Xamarin.Forms

Announcement:

The Xamarin Forums have officially moved to the new Microsoft Q&A experience. Microsoft Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

To create new threads and ask questions head over to Microsoft Q&A for .NET and get involved today.

Xamarin forms: Webview content default size is too small

SreeeeSreeee INMember ✭✭✭✭✭

I am using a webview custom renderer for showing the HTML data on UI. The default size of the webview content is too small.

My Code:

MyWebView.cs

public  class MyWebView : WebView
{
    public static readonly BindableProperty UrlProperty = BindableProperty.Create(
    propertyName: "Url",
    returnType: typeof(string),
    declaringType: typeof(MyWebView),
    defaultValue: default(string));

    public string Url
    {
        get { return (string)GetValue(UrlProperty); }
        set { SetValue(UrlProperty, value); }
    }
}

MyWebViewRenderer.cs in ios

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();
            _wkWebView = new WKWebView(Frame, config);
            SetNativeControl(_wkWebView);
        }
    }

    protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
    {
        base.OnElementPropertyChanged(sender, e);

        if (e.PropertyName == "Url")
        {
            Control.LoadHtmlString(Element.Url, null);
        }
    }
}

XAML and XAML.cs

    <local:MyWebView 
    x:Name="web_view"
    HorizontalOptions="FillAndExpand"
    VerticalOptions="FillAndExpand">
</local:MyWebView>

web_view.Url = "htmldata";

Output Screenshot

enter image description here

The text and video sizes are very small, I don't see any option for increasing the font size of webview, please suggest a solutionn for this issue.

Best Answer

  • SreeeeSreeee INMember ✭✭✭✭✭
    Accepted Answer

    Answer from my SO thread:

    You can add NavigationDelegate for WKWebView to modify font size of webview .

    As follow:

    protected override void OnElementChanged(ElementChangedEventArgs<MyWebView> e)
    {
        base.OnElementChanged(e);
    
        if (Control == null)
        {
            var config = new WKWebViewConfiguration();
            _wkWebView = new WKWebView(Frame, config);
            _wkWebView.NavigationDelegate = new MyNavigationDelegate();
            SetNativeControl(_wkWebView);
        }
    }
    
    public class MyNavigationDelegate : WKNavigationDelegate
    {
        public override void DidFinishNavigation(WKWebView webView, WKNavigation navigation)
        {
            string fontSize = "200%"; // > 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);
        }
    
    }
    

    The default effect :

    enter image description here

    The 200% effect:

    enter image description here

Answers

  • LucasZhangLucasZhang Member, Xamarin Team Xamurai

    It seems that Junior had provided a solution https://stackoverflow.com/questions/61114274/xamarin-forms-webview-content-default-size-is-too-small . You could check it :)

  • SreeeeSreeee INMember ✭✭✭✭✭
    Accepted Answer

    Answer from my SO thread:

    You can add NavigationDelegate for WKWebView to modify font size of webview .

    As follow:

    protected override void OnElementChanged(ElementChangedEventArgs<MyWebView> e)
    {
        base.OnElementChanged(e);
    
        if (Control == null)
        {
            var config = new WKWebViewConfiguration();
            _wkWebView = new WKWebView(Frame, config);
            _wkWebView.NavigationDelegate = new MyNavigationDelegate();
            SetNativeControl(_wkWebView);
        }
    }
    
    public class MyNavigationDelegate : WKNavigationDelegate
    {
        public override void DidFinishNavigation(WKWebView webView, WKNavigation navigation)
        {
            string fontSize = "200%"; // > 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);
        }
    
    }
    

    The default effect :

    enter image description here

    The 200% effect:

    enter image description here

Sign In or Register to comment.