locked
WebView Don't Fit Screen in Xamarin ios RRS feed

  • Question

  • User396217 posted

    I use Xamarin WebView to open a site, On Android the site fills the page and work correctly . But on iOS it appears as shown in the picture I used this code but it does not solve the problem var myDisplay = DeviceDisplay.MainDisplayInfo; MyWebView.HeightRequest = myDisplay.Height; MyWebView.WidthRequest = myDisplay.Width;

    in xaml

    I want webview in Ios Appear as same as Android. I added 2 picture to describe what i want IosWebView AndriodWebView

    Thursday, August 13, 2020 9:02 AM

Answers

  • User41045 posted

    @NehalOSamaFahmy My guess is that the Android is loading in Mobile view where as iOS is loading in Desktop mode. Need to check if there is a way to enable the Mobile view. Because, your payment page is using responsive design.

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Thursday, August 13, 2020 3:27 PM
  • User396217 posted

    This is the solution of that problem

    class CustomWebViewRenderer : WkWebViewRenderer { const string JavaScriptFunction = @"var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta);"; WKUserContentController userController;

    public CustomWebViewRenderer() : this(new WKWebViewConfiguration())
    {
    }
    
    public CustomWebViewRenderer(WKWebViewConfiguration config) : base(config)
    {
    
        userController = config.UserContentController;
        var script = new WKUserScript(new NSString(JavaScriptFunction), WKUserScriptInjectionTime.AtDocumentEnd, false);
        userController.AddUserScript(script);
        config.UserContentController = userController;
        WKWebView webView = new WKWebView(Frame, config);
    }
    

    }

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Wednesday, August 19, 2020 4:36 PM

All replies

  • User382871 posted

    WebView Don't Fit Screen in Xamarin ios Will it work if to specify a fixed value for the HeightRequest and WidthRequest properties? Try to use a fixed value for test to check that. Or you can try to use a Grid to wrap the WebView and set the definition to *. <Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="Red"> <Grid.RowDefinitions> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <WebView x:Name="webview" .../> </Grid>

    Thursday, August 13, 2020 12:56 PM
  • User396217 posted

    that not solved my problem also, I think it happen because zoom , can i set zoom value to web view i didn't found any attribute about that.

    Thursday, August 13, 2020 2:27 PM
  • User41045 posted

    @NehalOSamaFahmy My guess is that the Android is loading in Mobile view where as iOS is loading in Desktop mode. Need to check if there is a way to enable the Mobile view. Because, your payment page is using responsive design.

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Thursday, August 13, 2020 3:27 PM
  • User396217 posted

    https://stackoverflow.com/questions/26295277/wkwebview-equivalent-for-uiwebviews-scalespagetofit

    i found that the problem in webkit don't have scalespagetofit but i can't write the solution in c#. can anyone help me about that please ?

    i try that but not solve my problem aslo [assembly: ExportRenderer(typeof(CustomWebView), typeof(CustomWebViewRenderer))] namespace TanfezClient.iOS.Renderers { class CustomWebViewRenderer : WkWebViewRenderer { protected override void OnElementChanged(VisualElementChangedEventArgs e) { base.OnElementChanged(e); //this.ScalesLargeContentImage = true; //this.ShowsLargeContentViewer = true; //this.SizeToFit();

            string jScript = @"var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); 
           meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta);";
            WKUserScript wkUScript = new WKUserScript((NSString)jScript, WKUserScriptInjectionTime.AtDocumentEnd, true);
            WKUserContentController wkUController = new WKUserContentController();
            wkUController.AddUserScript(wkUScript);
            WKWebViewConfiguration wkWebConfig = new WKWebViewConfiguration();
            wkWebConfig.UserContentController = wkUController;
            WKWebView webView = new WKWebView(Frame, wkWebConfig);
        }
    }
    
    Sunday, August 16, 2020 9:38 AM
  • User396217 posted

    @AnubhavRanjan

    Sunday, August 16, 2020 10:06 AM
  • User396217 posted

    This is the solution of that problem

    class CustomWebViewRenderer : WkWebViewRenderer { const string JavaScriptFunction = @"var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta);"; WKUserContentController userController;

    public CustomWebViewRenderer() : this(new WKWebViewConfiguration())
    {
    }
    
    public CustomWebViewRenderer(WKWebViewConfiguration config) : base(config)
    {
    
        userController = config.UserContentController;
        var script = new WKUserScript(new NSString(JavaScriptFunction), WKUserScriptInjectionTime.AtDocumentEnd, false);
        userController.AddUserScript(script);
        config.UserContentController = userController;
        WKWebView webView = new WKWebView(Frame, config);
    }
    

    }

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Wednesday, August 19, 2020 4:36 PM
  • User41045 posted

    @NehalOSamaFahmy Sorry for being late. Kudos to you! Glad to see that you resolved the issue :)

    Thursday, August 20, 2020 8:08 AM