在 Xamarin.Forms 屏幕旋转事件的核心库中调整 WebView 的大小

Question

我在核心库中将网页定义为填充整个屏幕的视图：

Content = new WebView
{
    VerticalOptions = LayoutOptions.FillAndExpand,
    HorizontalOptions = LayoutOptions.FillAndExpand,
    Source = "https://google.com",
};

不幸的是，在屏幕旋转时它没有调整大小（请参见下文）：

如何确保在屏幕旋转时调整屏幕大小。

Answer 1

如果是 iOS，则制作自定义 WebView 渲染器 (http://developer.xamarin.com/guides/cross-platform/xamarin-forms/custom-renderer/):

protected override void OnElementChanged (VisualElementChangedEventArgs e)
{
    base.OnElementChanged(e);

    AutoresizingMask = UIViewAutoresizing.FlexibleDimensions;
    ScalesPageToFit = true;
}

public override void LayoutSubviews()
{
    base.LayoutSubviews();

    NativeView.Bounds = UIKit.UIScreen.MainScreen.Bounds;
}

Answer 2

您需要使用 Xamarin.forms 来处理 webview。

Working with WebView in Xamarin.Forms

xamarin-forms-samples/WorkingWithWebview 每个平台都有示例。

Handling Rotation 上的 link 为您提供了 android 所需的所有详细信息。另一个答案涵盖了 iOS.

Responding To Orientation Changes In Xamarin Forms又一个伟大的link

Customizing Controls for Each Platform 使用这些前提，您可以在一个应用程序中分别管理每个平台的屏幕旋转。

Handling Runtime Changes 展示了如何管理屏幕旋转。您需要向下滚动页面。

管理 windows phone, The two ways to handle orientation in your Windows 8.1 app.

的好方法 link

另一个有用的 link Fix IE 10 on Windows Phone 8 Viewport.

这是来自 mozilla 的 Managing screen orientation 上的一个有趣的 link。这是实验性的，但很有趣。

Answer 3

请尝试此解决方案，它适用于 iOS 8.4，但不适用于 iOS 7。 Xamarin Forms: How to resize the Webview after rotation in iOS

Answer 4

我实现了自定义渲染器并添加了 "webView.AutoresizingMask = UIViewAutoresizing.FlexibleDimensions;" 行，但它对我不起作用。然后，我用一个不太优雅的解决方案解决了这个问题（当设备方向改变时重新加载 WebView 组件）。

在我的 xaml:

  <StackLayout Padding="0" >
      <WebView x:Name="viewJupyter" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" />
  </StackLayout>

还有我的代码 class:

public partial class ServiceChart : ContentPage
{
    private int _rotateView;
    public ServiceChart(string title, string url)
    {
        Title = title;
        InitializeComponent();

        var urlPage = new UrlWebViewSource
        {
            Url = url
        };
        viewJupyter.Source = urlPage;

        if (Device.OS == TargetPlatform.iOS)
        {
            SizeChanged += (sender, arg) =>
            {
                if (_rotateView != 0)
                { 
                    var lalala = viewJupyter;
                    InitializeComponent();
                    viewJupyter.Source = (lalala.Source as UrlWebViewSource).Url;
                }
                _rotateView++;
            };
        }
    }
}

在 Xamarin.Forms 屏幕旋转事件的核心库中调整 WebView 的大小

Resize WebView defined in Xamarin.Forms Core library on screen rotate event

webview

xamarin.ios

xamarin

xamarin.forms