Проблема с отображением Webview на Android при смене страницы и режима отображения (книжный -> Альбомный)

#c# #xaml #xamarin #xamarin.forms

#c# #xaml #xamarin #xamarin.forms

Вопрос:

когда я пытаюсь отобразить webView одну из моих веб-страниц в альбомном режиме ( https://web-labosims.org/animations/App_refraction_reflexion/App_refractionamp;reflexion.html ) он корректно работает на Android.

Скриншоты

Но когда это не первая страница, и я меняю ориентацию между страницами, она больше не работает должным образом на Android (проблема с отображением)…

MainPage.xaml.cs

     public partial class MainPage : ContentPage
    {
        private List<Anim> lesAnimations;
        public MainPage()
        {
            InitializeComponent();

            String animsJson = "[{"Nom":"Réfraction et réfexion","url":"https://web-labosims.org/animations/App_refraction_reflexion/App_refractionamp;reflexion.html","imageUrl":"App_refraction.png"},{"Nom":"Synthèse soustractive","url":"https://web-labosims.org/animations/App_lumiere3/App_lumiere3.html","imageUrl":"App_soustractive.png"}]";

            lesAnimations = JsonConvert.DeserializeObject<List<Anim>>(animsJson);

            maListView.ItemsSource = lesAnimations;

            maListView.ItemSelected  = (sender, e) =>
            {
                if (maListView.SelectedItem != null)
                {
                    Anim item = maListView.SelectedItem as Anim;

                    GoAnimation(item.url);
                }
                maListView.SelectedItem = null;
            };

        }

        private async Task GoAnimation(String url)
        {
            await this.Navigation.PushAsync(new Animation(url));
        }

        protected override void OnAppearing()
        {
            base.OnAppearing();
            DependencyService.Get<IOrientationHandler>().ForcePortrait();
        }

        protected override void OnDisappearing()
        {
            base.OnDisappearing();
            DependencyService.Get<IOrientationHandler>().ForceLandscape();
        }

    }
 

Animation.xaml

 <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:controls="clr-namespace:LaboSims;assembly=LaboSims"
             x:Class="LaboSims.Animation">
    <ContentPage.Content>
            <WebView x:Name="maWebView"  
                     WidthRequest="1000"
                     HeightRequest="1000"
                     />
    </ContentPage.Content>
</ContentPage>
 

Animation.xaml.cs

 public partial class Animation : ContentPage
    {
        public Animation(String url)
        {
            InitializeComponent();

            NavigationPage.SetHasNavigationBar(this, false);

            maWebView.Source = url;
        }

    }
 

IOrientationHandler.cs

 namespace LaboSims
{
    public interface IOrientationHandler
    {
        void ForceLandscape();
        void ForcePortrait();
    }
}
 

И на Android

 using Android.Content.PM;
using LaboSims.Droid;
using Plugin.CurrentActivity;

[assembly: Xamarin.Forms.Dependency(typeof(OrientationHandler))]
namespace LaboSims.Droid
{
    public class OrientationHandler : IOrientationHandler
    {
        public void ForceLandscape()
        {
            CrossCurrentActivity.Current.Activity.RequestedOrientation = ScreenOrientation.Landscape;
        }

        public void ForcePortrait()
        {
            CrossCurrentActivity.Current.Activity.RequestedOrientation = ScreenOrientation.Portrait;
        }
    }
}
 

Скриншоты

Я не понимаю, где я допускаю ошибку…

Комментарии:

1. Можете ли вы предоставить один образец на github, я загружу ваш образец для тестирования. Я вижу, что есть listview, но вы не публикуете какой-либо код об этом.

2. Спасибо за вашу помощь, в конце концов я обнаружил проблему, она возникла из мета-тега моей веб-страницы

Ответ №1:

Я был уверен, что проблема должна быть простой, и действительно, это простая ошибка… Я допустил небольшую ошибку в своем мета-теге на своей веб-странице. Я изменил его на :

 <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
 

И все работает правильно