Xamarin.Forms on iOS 11.1.2: Webview loads a bigger font

Question

I'm using Xamarin.Forms to load an internet's webpage (requirements of the client, please don't judge me), the problem is that in iOS the webpage appears to be bigger that it is.

I don't have any custom render on iOS.

Here is the website loaded on safari on a iPhone 6 iOS 11.1.2

And here is loaded on the webview

MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:Juppie"
             x:Class="Juppie.MainPage">
             <Grid>

    <WebView x:Name="Navegador" Source="http://empleosapp.caonainteractive.com/" 
    WidthRequest="1000" HeightRequest="1000" IsVisible="{Binding Path=HayInternet}" ></WebView>
    <ActivityIndicator IsRunning="{Binding Path=Navegando}" IsVisible="{Binding Path=Navegando}"
        VerticalOptions="CenterAndExpand"
                               HorizontalOptions="CenterAndExpand"
                               RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent,
                                        Property=Height,
                                        Factor=0.33}"
                               RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,
                                        Property=Height,
                                        Factor=0.33}"/>
    </Grid>


</ContentPage>

MainPage.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
using Plugin.Connectivity;
using System.ComponentModel;

namespace Juppie
{
    public partial class MainPage : ContentPage, INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        public MainPage()
        {
            InitializeComponent();

            Navegador.Navigating += Navegador_Navigating;
            Navegador.Navigated += (sender, e) => { Navegando = false; };
            HayInternet = true;
            BindingContext = this;
        }
        bool hayInternet;

        public bool HayInternet
        {
            get
            {
                return hayInternet;
            }

            set
            {
                hayInternet = value;

                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("HayInternet"));

                EvaluarInternet();
            }
        }
        bool navegando;

        public bool Navegando
        {
            get
            {
                return navegando;
            }

            set
            {
                navegando = value;
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Navegando"));

            }
        }

        public async void EvaluarInternet(){
            if (!HayInternet)
            {
             await DisplayAlert("Aviso","Se requiere conexion a internet para emplear esta aplicacion", "OK");
            }
        }

        protected override void OnAppearing()
        {
            HayInternet = CrossConnectivity.IsSupported && CrossConnectivity.Current.IsConnected;

            CrossConnectivity.Current.ConnectivityChanged += (sender, args) =>
            {
                HayInternet = args.IsConnected;
            };

            base.OnAppearing();
        }

        protected override bool OnBackButtonPressed()
        {
            if (Navegador.CanGoBack)
            {
                Navegador.GoBack();
                return false;
            }

            return base.OnBackButtonPressed();
        }

        void Navegador_Navigating(object sender, WebNavigatingEventArgs e)
        {
            Navegando = true;
            if (e.Url.Contains("/banner"))
            {
                e.Cancel = true;

                var uri = new Uri(e.Url.Replace("/banner", ""));
                Device.OpenUri(uri);
            }
        }
    }
}

I tried with a custom render and set the scalePageToFit = false, without success. If anyone knows how can I fix this, please let me know.

Answer 1

Xaml: - VerticalOptions="FillAndExpand" seems to fill the HeightRequest and WidthRequest property specification requirements for the WebView to render in a StackLayout - in a Grid it seems to render anyway:

<Grid>
    <WebView x:Name="webView"
             VerticalOptions="FillAndExpand"
             Source="https://www.xamarin.com/"/>
</Grid>

Renderer, ScalesPageToFit is false by default (at least in the simulator with iPhone SE 11.2)

[assembly: ExportRenderer(typeof(WebView), typeof(MyWebViewRenderer))]
namespace MyNamespace.iOS
{
    public class MyWebViewRenderer : WebViewRenderer
    {
        protected override void OnElementChanged(VisualElementChangedEventArgs e)
        {
            base.OnElementChanged(e);

            if (NativeView != null && e.NewElement != null)
            {
                var webView = ((UIWebView)NativeView);
                webView.ScalesPageToFit = true;
            }
        }
    }
}

The screenshots below are from the simulator with iPhone SE.

ScalesPageToFit = true:

ScalesPageToFit = false:

Answer 2

Tested on my iPhone 6 and the app was showing the same size of font as Safari. I also tested with larger system font in the font size in the app and it was not affected with the app font size. But I did notice that when the activity indicator was running, my font size became smaller and it turned normal after the activity indicator disappear.

Maybe the font size issue was cause by the side effect of any additional stuff like a Nuget packages or Activity indicator?

You could try to use a new empty form and load only the Webview to compare the differences.

By the way, your app appearance is very alike with iPhone with turned on Display Zoom function.

Before turn on Display Zoom:

After turned on Display Zoom: