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.
4 Answers
Answers 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: 
Answers 2
Is it possible that the sizing is overwritten by the accessability-settings from the iPhone?
See Settings-App -> General -> Accessability -> Bigger Text
(freely translated from german, actual menu entries may be named different)
Answers 3
I have faced the same issue.
In Xamarin.Forms App resolution is based on the Launch screen. If you are using Assets (LaunchImage) for Launch screen. Then your app resolution is set as per LaunchImage.
The best solution is: use storyboard (LaunchScreen.storyboard) or XIB for Launch screen. This improves your App UI. like font size and App resolution
Answers 4
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 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, the font size in the app.
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:
0 comments:
Post a Comment