Forum› Xamarin.Forms

WebView Don't Fit Screen in Xamarin ios

NehalOSamaFahmyNehalOSamaFahmy Member ✭✭
in Xamarin.Forms

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

Tagged:

Best Answers

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">
    <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 ✭✭

    @AnubhavRanjan

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