Xamarin 表单：Webview 内容默认大小太小答案

【问题标题】：Xamarin forms: Webview content default size is too smallXamarin 表单：Webview 内容默认大小太小
【发布时间】：2020-07-21 16:00:05
【问题描述】：

我正在使用webview 自定义渲染器在 UI 上显示 HTML 数据。 webview 内容的默认大小太小了。

我的代码：

MyWebView.cs

public  class MyWebView : WebView
{
    public static readonly BindableProperty UrlProperty = BindableProperty.Create(
    propertyName: "Url",
    returnType: typeof(string),
    declaringType: typeof(MyWebView),
    defaultValue: default(string));

    public string Url
    {
        get { return (string)GetValue(UrlProperty); }
        set { SetValue(UrlProperty, value); }
    }
}

ios 中的 MyWebViewRenderer.cs

public class MyWebViewRenderer : ViewRenderer<MyWebView, WKWebView>
{
    WKWebView _wkWebView;

    protected override void OnElementChanged(ElementChangedEventArgs<MyWebView> e)
    {
        base.OnElementChanged(e);

        if (Control == null)
        {
            var config = new WKWebViewConfiguration();
            _wkWebView = new WKWebView(Frame, config);
            SetNativeControl(_wkWebView);
        }
    }

    protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
    {
        base.OnElementPropertyChanged(sender, e);

        if (e.PropertyName == "Url")
        {
            Control.LoadHtmlString(Element.Url, null);
        }
    }
}

XAML 和 XAML.cs

    <local:MyWebView 
    x:Name="web_view"
    HorizontalOptions="FillAndExpand"
    VerticalOptions="FillAndExpand">
</local:MyWebView>

web_view.Url = "htmldata";

输出截图

文本和视频尺寸非常小，我没有看到任何增加 webview 字体大小的选项，请针对此问题提出解决方案。

【问题讨论】：

我能快速看看你的父布局是什么吗？通常，当这样的问题发生在 iOS 上时，我的猜测是你的布局没有让你的 WebView 匹配屏幕的高度，但我可能是错的。

标签： xamarin.forms webview

【解决方案1】：

WKWebView可以添加NavigationDelegate来修改webview的字体大小。

如下：

protected override void OnElementChanged(ElementChangedEventArgs<MyWebView> e)
{
    base.OnElementChanged(e);

    if (Control == null)
    {
        var config = new WKWebViewConfiguration();
        _wkWebView = new WKWebView(Frame, config);
        _wkWebView.NavigationDelegate = new MyNavigationDelegate();
        SetNativeControl(_wkWebView);
    }
}

public class MyNavigationDelegate : WKNavigationDelegate
{
    public override void DidFinishNavigation(WKWebView webView, WKNavigation navigation)
    {
        string fontSize = "200%"; // > 100% shows larger than previous
        string stringsss = string.Format("document.getElementsByTagName('body')[0].style.webkitTextSizeAdjust= '{0}'", fontSize);
        WKJavascriptEvaluationResult handler = (NSObject result, NSError err) =>
        {
            if (err != null)
            {
                System.Console.WriteLine(err);
            }
            if (result != null)
            {
                System.Console.WriteLine(result);
            }
        };
        webView.EvaluateJavaScript(stringsss, handler);
        //base.DidFinishNavigation(webView, navigation);
    }

}

默认效果：

200% 效果：

==================================更新============ ======================

如果想对Html的每个元素进行resize，可以在Html的内容前添加一个header样式。

如下：

string headerString = "<header><meta name='viewport' content='width=device-width, initial-scale=2.0, maximum-scale=5.0, minimum-scale=1.0, user-scalable=no'><style>img{max-width:100%}</style></header>";
string finalHtml = headerString + baseHtml ; //baseHtml is current loaded Html
...

例如，你可以修改initial-scale里面headerString的值。下面是示例效果：

string headerString = "<header><meta name='viewport' content='width=device-width, initial-scale=1.5, maximum-scale=5.0, minimum-scale=1.0, user-scalable=no'><style>img{max-width:100%}</style></header>";
string bodyString = "<html><body><h1>Xamarin.Forms</h1><p>Welcome to WebView.</p><video src='movie.ogg'controls='controls'></video></body></html>";
string finalHtml = headerString + bodyString;
...

initial-scale=1.0效果：

initial-scale=1.5效果：

==================================更新============ ======================

如果想让 Video 的宽度适合屏幕，我建议从Html soucre 代码处理这个。因为Html有CSS样式可供使用。例如，如果在Html中为Video添加style='width:100%;'，则视频将适合屏幕宽度，如下所示：

Html的完整代码：

string bodyString = "<html><body><h1>Xamarin.Forms</h1><p>Welcome to WebView.</p><video style='width:100%;' src='movie.ogg'controls='controls'></video></body></html>";

===============================更新================ ================

如果无法修改Html的代码，也可以使用WKNavigationDelegate从html中获取video对象为它们修改值。

如下：

public class MyNavigationDelegate : WKNavigationDelegate
{
    public override void DidFinishNavigation(WKWebView webView, WKNavigation navigation)
    {
        // 100% width
        string stringHtml =  "var objs = document.getElementsByTagName('video');for(var i=0; i<objs.length; i++) { objs[i].style.width='100%';} ";
        WKJavascriptEvaluationResult handler = (NSObject result, NSError err) =>
        {
            if (err != null)
            {
                System.Console.WriteLine(err);
            }
            if (result != null)
            {
                System.Console.WriteLine(result);
            }
        };
        webView.EvaluateJavaScript(stringHtml, handler);
    }

}

【讨论】：

这适用于文本，视频宽度没有增加。有什么要添加的解决方案吗？
@SreejithSree 有一个解决方案供参考，为 html body 添加标头。我已经更新了答案，你有时间可以看看。
我试过这个，但问题是视频宽度超过了屏幕宽度。请浏览随附的屏幕截图。如何将视频宽度设置为等于手机屏幕宽度？ drive.google.com/open?id=1YhHveixvXgkY6zL-pyYqH8za2hpqzpXo
@SreejithSree 我已经更新了答案。我认为这最好由Html 处理。因为有CSS 样式供它使用，并且很容易从Html 中实现。
@SreejithSree 那不是给而不是video。该命令用于查找video 并将宽度设置为100%。