locked
Xamarin Form IOS WKWebView Pinch Zoom RRS feed

  • Question

  • User384637 posted

    In UIWebView, the function ScalePageToFit can enable pinch zoom on the webview. Because of UIWebView wll be deprecate, I change to WKWebView suggested by IOS, but ScalePageToFit is not there anymore. Any idea how to make pinch zoom like UIWebView?

    Friday, March 6, 2020 3:51 AM

Answers

  • User369979 posted

    Try to add the javascript like:

    WKUserContentController userController = new WKUserContentController();
    var userScript = new WKUserScript(new NSString("var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta);"), WKUserScriptInjectionTime.AtDocumentEnd, true);
    userController.AddUserScript(userScript);
    WKWebViewConfiguration configuration = new WKWebViewConfiguration();
    configuration.UserContentController = userController;
    WKWebView wkWebView = new WKWebView(View.Bounds, configuration);
    wkWebView.LoadRequest(new NSUrlRequest(new NSUrl("https://www.microsoft.com")));    
    View.AddSubview(wkWebView);
    
    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Friday, March 6, 2020 6:22 AM

All replies

  • User369979 posted

    Try to add the javascript like:

    WKUserContentController userController = new WKUserContentController();
    var userScript = new WKUserScript(new NSString("var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta);"), WKUserScriptInjectionTime.AtDocumentEnd, true);
    userController.AddUserScript(userScript);
    WKWebViewConfiguration configuration = new WKWebViewConfiguration();
    configuration.UserContentController = userController;
    WKWebView wkWebView = new WKWebView(View.Bounds, configuration);
    wkWebView.LoadRequest(new NSUrlRequest(new NSUrl("https://www.microsoft.com")));    
    View.AddSubview(wkWebView);
    
    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Friday, March 6, 2020 6:22 AM
  • User384637 posted

    @LandLu said: Try to add the javascript like:

    WKUserContentController userController = new WKUserContentController();
    var userScript = new WKUserScript(new NSString("var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta);"), WKUserScriptInjectionTime.AtDocumentEnd, true);
    userController.AddUserScript(userScript);
    WKWebViewConfiguration configuration = new WKWebViewConfiguration();
    configuration.UserContentController = userController;
    WKWebView wkWebView = new WKWebView(View.Bounds, configuration);
    wkWebView.LoadRequest(new NSUrlRequest(new NSUrl("https://www.microsoft.com")));    
    View.AddSubview(wkWebView);
    

    Hi @LandLu THANKS FOR QUICK RESPONSE But can I know where to put your code? Custom render?

    Friday, March 6, 2020 8:34 AM
  • User369979 posted

    Yes, If you are using Xamarin.Forms. Reset the configurations there in the custom renderer of WKWebView.

    Friday, March 6, 2020 8:36 AM
  • User384637 posted

    @LandLu I got error on View.Bounds and View.AddSubview Then I change 'View' to 'Control', my webpage appear but pinch zoom not working. I also included meta attribute 'initial-scale=1,maximum-scale=10,user-scalable=yes' , yet still nothing happen. Anything that I missed or need to add on, I'll appreciate your advice. Thanks :)

    Saturday, March 7, 2020 5:22 AM