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

Question

I use Xamarin.Forms to load a webpage on the Internet (client requirements, please don't judge me), the problem is that in iOS the webpage looks bigger than it is.

I don't have custom rendering on iOS.

Here is a website uploaded to safari on the iPhone 6 iOS 11.1.2

And here it uploads to web browsing

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 scalePageToFit = false, without success. If anyone knows how I can fix this, let me know.

Answer 1

Tested on my iPhone 6, and the same font appeared in the application as Safari. I also tested a larger system font at the font size in the application, and it was not affected by the font size of the application. But I noticed that when the activity indicator worked, the size of my font decreased, and it became normal after the activity indicator disappeared.

Perhaps the font size problem was caused by a side effect of any additional material, such as Nuget or Activity packages?

You can try to use the new blank form and download only Webview to compare the differences.

By the way, the look of your application is very similar to an iPhone with Display Zoom enabled.

Before turning on Display Zoom:

After turning on Display Zoom:

Answer 2

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

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

Renderer, ScalesPageToFit is false by default (at least in 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; } } } } 

Below are screenshots from the simulator with iPhone SE.

ScalesPageToFit = true:

ScalesPageToFit = false:

Answer 3

Is it possible that the size will be overwritten by the accessibility settings from the iPhone?

See Settings-Application → General → Accessibility → Large Text

(freely translated from German, actual entries in the menu may be called different)

Answer 4

I ran into the same problem.

In Xamarin.Forms, application resolution is based on the launch screen. If you use Assets (LaunchImage) for the startup screen. Then your application will be installed in accordance with LaunchImage.

Best solution: use a storyboard (LaunchScreen.storyboard) or XIB for the startup screen. This improves your application user interface. font size and application resolution