WebView Rendering Engine Configuration

The WebView isn’t very configurable at the Xamarin Forms level, however each platform provides a large array of configuration settings for their native control. These settings are very different per platform, which makes it understandable, why they wouldn’t be configurable in a cross platform framework.

An important thing to note, is the rendering enginer the WebView uses in your mobile app, won’t use the same rendering engine as the default browser on each platform. They are normally a slightly tweaked and cut down version of the full version. This can lead to many rendering issues.

If you want to make changes to settings to the rendering engine, you will need to create a custom renderer, as shown below.

Android

Android’s native web browser is called WebKit. Each version of Android has a different WebKit version and starting from 5.0+, the WebKit was separated from the SDK and hence could be updated separately by the OS. This can lead to an enormous array of possible configurations for the WebView on Android. In earlier versions of Android, it used the standard OS browser rendering engine, called WebKit, not to be confused with the Android control called WebKit. As of 4.4, this changed to Chromium based, however its not identical to the Chrome Browser App.

[assembly: ExportRenderer(typeof(WebView), typeof(WebViewRender))]
namespace Mobile.Droid.Render
{
    using Android.OS;
    using System;
    using Xamarin.Forms.Platform.Android;
    using Android.Content;
    using Android.Webkit;

    public class WebViewRender : WebViewRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs e)
        {
            base.OnElementChanged(e);

            if (Control != null && e.NewElement != null)
                SetupControlSettings();
        }

        private void SetupControlSettings()
        {
            // Change Settings Here e.g.
            Control.Settings.JavaScriptEnabled = true;

            // Handy Hint: PDF JS will show massive fonts unless the minimum font size is defined as 0. I found this doesn't affect anything else I came across.
            Control.Settings.MinimumFontSize = 0;

            // Android 4.4 and below doesn't respect the ViewPort in HTML
            if (Build.VERSION.SdkInt < BuildVersionCodes.Lollipop)
                Control.Settings.UseWideViewPort = true;
        }
    }
}

iOS

Up to and including iOS 7, iOS uses the UIWebView control. Starting from 8.0+, you then have the choice of UIWebView or WKWebKit. The WKWebKit is more advanced, however Xamarin Forms continues to use the UIWebKit, due to the investment in already wiring that up to Xamarin Forms.

[assembly: ExportRenderer(typeof(WebView), typeof(WebViewRender))]
namespace Mobile.iOS.Render
{
    using UIKit;
    using Xamarin.Forms.Platform.iOS;

    public class WebViewRender : WebViewRenderer
    {
        protected override void OnElementChanged(VisualElementChangedEventArgs e)
        {
            base.OnElementChanged(e);

            if (NativeView != null && e.NewElement != null)
                SetupControlSettings();
        }

        private void SetupControlSettings()
        {
            var webView = ((UIWebView)NativeView);
            webView.ScalesPageToFit = true;
        }
    }
}

UWP

WebView for UWP, translates to a native UWP control called, WebBrowser. The WebBrowser uses the Edge rendering engine. The WebBrowser is much more limited in control than the other platforms, but they are a few settings you can change.

[assembly: ExportRenderer(typeof(WebView), typeof(WebViewRender))]
namespace Mobile.UWP.Render
{
    using Xamarin.Forms;
    using System;

    public class WebViewRender : WebViewRenderer
    {

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

            if (Control != null && e.NewElement != null)
                SetupControlSettings();
 
        }

        private void SetupControlSettings()
        {
            Control.Settings.IsJavaScriptEnabled = true;
        }
    }
}
Microsoft MVP | Xamarin MVP | Xamarin Certified Developer |
Exrin MVVM Framework | Xamarin Forms Developer | Melbourne, Australia

Related Posts