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