Xamarin forms: Webview content default size is too small

Question

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

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.

Can I quickly see what is your parent Layout? Usually, when issues like these happen on iOS it's the constraints my guess is your layout is not letting your WebView match the height of the screen, I could be wrong though. — FreakyAli

Junior Jiang Junior Jiang · Accepted Answer · 2020-04-09T05:51:06

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 :

The 200% effect:

=================================Update==================================

If want each element of Html to be reszied , you can add a header style before the content Html .

As follow :

string headerString = "<header><meta name='viewport' content='width=device-width, initial-scale=2.0, maximum-scale=5.0, minimum-scale=1.0, user-scalable=no'><style>img{max-width:100%}</style></header>";
string finalHtml = headerString + baseHtml ; //baseHtml is current loaded Html
...

For example , you can modify the value of initial-scale inside the headerString .Follow is the sample effect :

string headerString = "<header><meta name='viewport' content='width=device-width, initial-scale=1.5, maximum-scale=5.0, minimum-scale=1.0, user-scalable=no'><style>img{max-width:100%}</style></header>";
string bodyString = "<html><body><h1>Xamarin.Forms</h1><p>Welcome to WebView.</p><video src='movie.ogg'controls='controls'></video></body></html>";
string finalHtml = headerString + bodyString;
...

initial-scale=1.0 effect :

initial-scale=1.5 effect :

=================================Update==================================

If want the width of Video fit the screen , I suggest that dealing this from Html soucre code . Because there are CSS styles for Html to use .For example , if adding style='width:100%;' for Video in Html , the Video will fit the width of screen as follow :

The full code of Html :

string bodyString = "<html><body><h1>Xamarin.Forms</h1><p>Welcome to WebView.</p><video style='width:100%;' src='movie.ogg'controls='controls'></video></body></html>";

==============================Update================================

If unable to modify code of Html , also can use WKNavigationDelegate to get video object from html to modify value for them .

As follow :

public class MyNavigationDelegate : WKNavigationDelegate
{
    public override void DidFinishNavigation(WKWebView webView, WKNavigation navigation)
    {
        // 100% width
        string stringHtml =  "var objs = document.getElementsByTagName('video');for(var i=0; i<objs.length; i++) { objs[i].style.width='100%';} ";
        WKJavascriptEvaluationResult handler = (NSObject result, NSError err) =>
        {
            if (err != null)
            {
                System.Console.WriteLine(err);
            }
            if (result != null)
            {
                System.Console.WriteLine(result);
            }
        };
        webView.EvaluateJavaScript(stringHtml, handler);
    }

}

Xamarin forms: Webview content default size is too small

1 Answers