0

WKWebView does not have scalesPageToFit, that's why in WKWebView all content and text sizes displayed small. To fix that issue I have used JavaScript, which works fine in iPhone device but in iPad still UI shows in centre of the Page, check the attached screen shots:

My code for WKWebView & Renderer:

1 XAML page

<control:CustomWebview  IsExit="{Binding IsAddAccountPageExit}" Source="{Binding AccountPageURL}" 
                 HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" />

2 CustomWebviewRenderer.cs

public class CustomWebviewRenderer : ViewRenderer<CustomWebview, WKWebView>
{
    public static CustomWebview view = null;
    public CustomWebviewRenderer() { }

    protected override void OnElementChanged(ElementChangedEventArgs<CustomWebview> e)
    {
        view = (CustomWebview)Element;
        string url = view.Source.GetValue(UrlWebViewSource.UrlProperty).ToString();

        string javaScript = @"var meta = document.createElement('meta');
                                meta.setAttribute('name', 'viewport');
                                meta.setAttribute('content', 'width=device-width, shrink-to-fit=YES');
                                document.getElementsByTagName('head')[0].appendChild(meta);";

        WKUserScript userScript = new WKUserScript((NSString)javaScript, WKUserScriptInjectionTime.AtDocumentEnd, true);
        WKUserContentController userController = new WKUserContentController();
        userController.AddUserScript(userScript);

        WKWebViewConfiguration wkWebConfig = new WKWebViewConfiguration();
        wkWebConfig.UserContentController = userController;
        WKWebView _wkWebView = new WKWebView(Frame, wkWebConfig);
        _wkWebView.ScrollView.ScrollEnabled = true;
        _wkWebView.NavigationDelegate = new HybridWebviewDelegate();
        _wkWebView.LoadRequest(new NSUrlRequest(new NSUrl(url)));
        
        SetNativeControl(_wkWebView);
    }

    public class HybridWebviewDelegate : WKNavigationDelegate
    {
        public override void DidStartProvisionalNavigation(WKWebView webView, WKNavigation navigation)
        {
            var actionScheme = webView.Url.Scheme;
            var actionType = webView.Url.Host;
            var path = webView.Url.Path;
            var queryString = webView.Url.Query;

            if (actionScheme == "https" && actionType == "payment.coeqwety.com" && path == "/public/stripe.html" && !string.IsNullOrEmpty(queryString))
            {
                string temUrl = webView.Url.Query;
                view.ResponseQueryString = temUrl;
                view.IsExit = true;
            }

            if (actionScheme == "plaidlink" || actionScheme == "stripe")
            {
                Console.WriteLine("Link detected: " + webView.Url.AbsoluteString);
                if ((actionScheme == "plaidlink" && actionType == "connected") || (actionScheme == "stripe" && actionType == "success"))
                {
                    string temUrl = webView.Url.Query;
                    view.ResponseQueryString = temUrl;
                    view.IsExit = true;
                }
                else if (actionType == "exit")
                {
                    Console.WriteLine("URL: " + webView.Url.AbsoluteString);
                    view.ResponseQueryString = string.Empty;
                    view.IsExit = true;   
                }
            }
            else
            {
                Console.WriteLine("Unrecognized URL scheme detected: " + webView.Url.AbsoluteString);
            }
        }
        public override void DecidePolicy(WKWebView webView, WKNavigationAction navigationAction, Action<WKNavigationActionPolicy> decisionHandler)
        {
            // You have to call the decisionHanler for each case
            if (navigationAction.NavigationType == WKNavigationType.LinkActivated)
            {
                decisionHandler(WKNavigationActionPolicy.Cancel);
            }
            else
            {
                decisionHandler(WKNavigationActionPolicy.Allow);
            }
        }
    }
}

I have try different alternative solution like, Adding this:

<meta name="viewport" content="width=device-width, shrink-to-fit=YES">

<meta name='viewport' content='width=device-width,initial-scale=1,maximum-scale=1' />

But none of this works, does anyone have idea regards this?

Reference: wkwebview-equivalent-for-uiwebviews-scalespagetofit - C# version

Output

Divyesh
  • 2,085
  • 20
  • 35
  • It seems an expected result in your case . The alert view has absolute max size in default . Since you invoke the JS method, it won't been larger any more . – Lucas Zhang Aug 17 '20 at 11:31
  • Means now I can not do anything about this? I have to invoke JS else it will not work at all, there must be some solution for this @LucasZhang-MSFT – Divyesh Aug 17 '20 at 11:34
  • You could share a sample and I will check it on my side . – Lucas Zhang Aug 17 '20 at 11:38
  • @LucasZhang-MSFT here is sample: https://rb.gy/fxfup6 – Divyesh Aug 17 '20 at 12:41
  • have you got any solution or work around? @LucasZhang-MSFT – Divyesh Aug 18 '20 at 06:21
  • I noticed that your sample contains a personal url , I could not test it because of security policy . And you could remove the link and replace with a public url . – Lucas Zhang Aug 18 '20 at 06:37
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/220013/discussion-between-divyesh-08-and-lucas-zhang-msft). – Divyesh Aug 18 '20 at 06:54

0 Answers0