WKWebView内容不适用于iPad Xamarin.Forms

问题描述

WKWebView没有scalesPagetoFit，这就是为什么在WKWebView中所有内容和文本大小显示的很小。为了解决这个问题，我使用了JavaScript，该JavaScript在iPhone设备上可以正常工作，但是 在iPad的UI仍显示在页面中心的情况下，检查所附的屏幕截图：

我的WKWebView和Renderer代码：

1个XAML页面

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

我尝试了其他替代解决方案，例如添加以下内容：

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

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

但是这都不起作用，有人对此有想法吗？

参考：wkwebview-equivalent-for-uiwebviews-scalespagetofit - C# version

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）