[FIXED] How do i disable zoom in/out in Xamarin Forms Webview

Issue

I have a problem about xamarin Forms Webview
I trying to disable zoom in webview so the user should not zoom.
https://www.c-sharpcorner.com/article/xamarin-forms-enable-default-zooming-in-webview/ I red this document and implement it but I got one error in WebViewRenderer error looks like that
how can i solve it or how can i disable zoom?

[assembly: ExportRenderer(typeof(CustomWebView), typeof(CustomWebViewRenderer))]

namespace example.iOS
{
public class CustomWebViewRenderer : WebViewRenderer
{
protected override void OnElementChanged(VisualElementChangedEventArgs e)
{
base.OnElementChanged(e);

        if (NativeView != null && e.NewElement != null)
        {
            var webView = NativeView as UIWebView;

            if (webView == null)
                return;

            webView.ScalesPageToFit = true;
        }
    }
}

}

UPDATE :

[assembly: ExportRenderer(typeof(CustomWebView), typeof(CustomWebViewRenderer))]

namespace netraporMobileApp.iOS
{
public class CustomWebViewRenderer : WkWebViewRenderer
{
protected override void OnElementChanged(VisualElementChangedEventArgs e)
{
base.OnElementChanged(e);

        if (NativeView != null && e.NewElement != null)
        {
            var webView = NativeView as UIWebView;

            if (webView == null)
                return;

            webView.ScalesPageToFit = true;
        }
    }
}

}

I changed like that but I can still zoom how can i disable zoom on IOS?

Solution

When you use the custom renderer for iOS, you could use WkWebViewRenderer.

  [assembly: ExportRenderer(typeof(CustomWebView), 
typeof(CustomWebviewRenderer))]
  namespace App1.iOS
  {
  public class CustomWebviewRenderer: WkWebViewRenderer
  {
  protected override void OnElementChanged(VisualElementChangedEventArgs e)
   {
       base.OnElementChanged(e);
     ........
    }
  } 
}

Update:

  1. When you local the URL, the default zoom of WebView is disabled.

  2. If you use the Html, you could configure the Html to disable it. Set user-scalable=no of meta tag in your Html.

      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    

Answered By – Wendy Zang – MSFT

Answer Checked By – Candace Johnson (Easybugfix Volunteer)

Leave a Reply

(*) Required, Your email will not be published