CODEWITHSUNDEEP
xamarin.formswebview
Sreejith Sree
Sreejith Sree

Reputation: 3716

Xamarin forms: Webview content default size is too small

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.

Upvotes: 0

Views: 1770

Answers (1)

Junior Jiang
Junior Jiang

Reputation: 12723

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

=================================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 :

enter image description here

initial-scale=1.5 effect :

enter image description here

=================================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 :

enter image description here

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

}

Upvotes: 2

Related Questions