HybridWebView充当整页浏览器 [英] 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.
例如，URL是以下内容: https://ej2 .syncfusion.com/demos/grid/grid-overview/index.html
The url is for example the following: https://ej2.syncfusion.com/demos/grid/grid-overview/index.html
目前我正在三星S10上对其进行测试.
Currenlty I'm testing it on Samsung S10.
我是否要从运行良好的Cordova应用程序中迁移:
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>
和InAppBrowser以这种方式在onDeviceReady中设置:
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');
推荐答案
问题是，当HybridWebView启动时，其高度和宽度相对于其父级不正确，则该问题不在正常的webview中出现.
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.
要设置正确运行，我必须更改OnElementChanged中的代码，如下所示:
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);
这篇关于HybridWebView充当整页浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
