Forum Xamarin.Forms
We are excited to announce that the Xamarin Forums are moving to the new Microsoft Q&A experience. Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

We encourage you to head over to Microsoft Q&A for .NET for posting new questions and get involved today.

WebView Don't Fit Screen in Xamarin ios

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

Best Answers

Answers

  • JarvanJarvan Member, Xamarin Team Xamurai

    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>
    
  • NehalOSamaFahmyNehalOSamaFahmy Member ✭✭

    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.

  • NehalOSamaFahmyNehalOSamaFahmy Member ✭✭

    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);
        }
    }
    
  • NehalOSamaFahmyNehalOSamaFahmy Member ✭✭
    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);
    }
    

    }

  • AnubhavRanjanAnubhavRanjan INXamarin Team Xamurai

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

Sign In or Register to comment.