iOS 11.1.2上的Xamarin.Forms：Webview加載了更大的字體

Question

我正在使用Xamarin.Forms加載互聯網的網頁（客戶端的要求，請不要評判我），問題是在iOS中網頁看起來更大。

我在iOS上沒有任何自定義渲染。

這是iPhone 6 iOS 11.1.2上的safari上加載的網站

這里加載在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);
            }
        }
    }
}

我嘗試使用自定義渲染並設置scalePageToFit = false，但沒有成功。 如果有人知道我該如何解決這個問題，請告訴我。

Answer 1

Xaml： - VerticalOptions="FillAndExpand"似乎填充了WebView要在StackLayout中呈現的HeightRequest和WidthRequest屬性規范要求 - 無論如何它在網格中呈現：

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

Renderer，ScalesPageToFit默認為false（至少在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;
            }
        }
    }
}

以下屏幕截圖來自iPhone SE的模擬器。

ScalesPageToFit = true：

ScalesPageToFit = false：

Answer 2

在我的iPhone 6上測試，該應用程序顯示與Safari相同的字體大小。 我還測試了應用程序中字體大小較大的系統字體，它不受應用程序字體大小的影響。 但是我確實注意到當活動指示器運行時，我的字體大小變小了，並且在活動指示器消失后它變為正常。

也許字體大小問題是由Nuget軟件包或活動指標等任何其他內容的副作用造成的？

您可以嘗試使用新的空表單並僅加載Webview來比較差異。

順便說一句，你的應用程序外觀與iPhone非常相似，並啟用了顯示縮放功能。

在開啟顯示縮放之前：

打開顯示縮放后：

Answer 3

是否有可能通過iPhone的可訪問性設置覆蓋大小調整？

請參閱設置 - 應用程序 - >常規 - >可訪問性 - >更大的文本

（從德語自由翻譯，實際菜單條目可能被命名為不同）

Answer 4

我遇到了同樣的問題。

在Xamarin.Forms App解析基於Launch屏幕。 如果您正在使用Assets（LaunchImage）啟動屏幕。 然后根據LaunchImage設置您的應用分辨率。

最佳解決方案是：使用故事板（LaunchScreen.storyboard）或XIB for Launch屏幕。 這可以改善您的App UI。 喜歡字體大小和應用分辨率