Forum Xamarin.Forms


The Xamarin Forums have officially moved to the new Microsoft Q&A experience. Microsoft Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

To create new threads and ask questions head over to Microsoft Q&A for .NET 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

Best Answers


  • YelinzhYelinzh 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">
            <RowDefinition Height="*"/>
            <ColumnDefinition Width="*"/>
        <WebView x:Name="webview" .../>
  • 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.


    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)
    //this.ScalesLargeContentImage = true;
    //this.ShowsLargeContentViewer = true;

            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();
            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);
        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.