HybridWebView acting as full page browser

问题

I'm trying to have a webview that displays a website using an HybridWebView taken from here https://github.com/xamarin/xamarin-forms-samples/tree/master/CustomRenderers/HybridWebView

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:PortaleDocumenti.Xamarin"
             x:Class="PortaleDocumenti.Xamarin.MainPage">

    <ContentPage.Content>
        <local:HybridWebView x:Name="hybridWebView" Uri="https://ej2.syncfusion.com/demos/grid/grid-overview/index.html" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"/>
    </ContentPage.Content>

</ContentPage>

When the page is displayed the width and heigth are not the whole viewport of the phone display and is not displayed correctly (it seems that is working as the desktop version), if I open it in browser is working fine.

The url is for example the following: https://ej2.syncfusion.com/demos/grid/grid-overview/index.html

Currenlty I'm testing it on Samsung S10.

I'm migrating if from a Cordova app that worked fine with:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'; img-src * data: 'unsafe-inline'; connect-src * 'unsafe-inline'; frame-src *;">

    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <title>Demo</title>
</head>
    <body>
        <div class="app">
            <h1>Apache Cordova</h1>
            <div id="deviceready" class="blink">
                <p class="event listening">Connecting to Device</p>
                <p class="event received">Device is Ready</p>
            </div>
        </div>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="scripts/platformOverrides.js"></script>
        <script type="text/javascript" src="scripts/index.js"></script>
    </body>
</html>

and InAppBrowser set up in this way in onDeviceReady:

var myRef = cordova.InAppBrowser.open('https://ej2.syncfusion.com/demos/grid/grid-overview/index.html', '_blank', 'location=no,toolbar=no,zoom=no');

回答1:

It sounds like you probably have to change the settings for the native Android web view to use a wide view port. On the Android HybridWebViewRenderer.OnElementChange() method, update the WebView Settings to include this:

if (Control == null)
{
    var webView = new Android.Webkit.WebView(_context);
    webView.Settings.JavaScriptEnabled = true;
    webView.Settings.UseWideViewPort = true;
    webView.Settings.MinimumFontSize = 1;
    webView.Settings.MinimumLogicalFontSize = 1;
    webView.SetWebViewClient(new JavascriptWebViewClient($"javascript: {JavascriptFunction}"));
    SetNativeControl(webView);
}

Setting webView.Settings.UseWideViewPort = true; should help, but it doesn't, then add the minimum font sizes as noted above.

Hope this helps!

回答2:

I don't have my PC with me,so can't check.But this should do the trick:

<ContentPage.Content>
     <StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
         <local:HybridWebView x:Name="hybridWebView" Uri="https://ej2.syncfusion.com/demos/grid/grid-overview/index.html" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"/>
     </StackLayout>

    </ContentPage.Content>

If that doesn't work,give HybridWebView HeightRequest and WidthRequest of random large digits like 2000

回答3:

The issue is that when the HybridWebView starts its height and width are incorrect relative to its parent, the issue is not present in the normal webview.

To set is working correctly, I have to change the code in OnElementChanged is the following:

webView.Settings.UseWideViewPort = true;
webView.Settings.LoadWithOverviewMode = true;
webView.LayoutParameters = new global::Android.Widget.RelativeLayout.LayoutParams(LayoutParams.MatchParent, LayoutParams.MatchParent);

来源：https://stackoverflow.com/questions/58464501/hybridwebview-acting-as-full-page-browser

标签

xamarin.forms

xamarin.android