Answers

• Yelinzh Member, Xamarin Team Xamurai

  August 2020

  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>
  

  0
• NehalOSamaFahmy Member ✭✭

  August 2020

  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.

  0
• AnubhavRanjan INXamarin Team Xamurai

  August 2020 Accepted Answer

  @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.

  5
• NehalOSamaFahmy Member ✭✭

  August 2020

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

  0
• NehalOSamaFahmy Member ✭✭

  August 2020

  @AnubhavRanjan

  0
• NehalOSamaFahmy Member ✭✭

  August 2020 Accepted Answer

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

  }

  0
• AnubhavRanjan INXamarin Team Xamurai

  August 2020

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

  0