Xamarin формы: по умолчанию размер содержимого Webview слишком мал - PullRequest
Новая
       6

Xamarin формы: по умолчанию размер содержимого Webview слишком мал

0 голосов
/ 09 апреля 2020

Я использую пользовательский рендерер webview для отображения данных HTML в пользовательском интерфейсе. Размер содержимого веб-просмотра по умолчанию слишком мал.

Мой код:

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); }
    }
}

MyWebViewRenderer.cs в ios

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";

Снимок экрана вывода

enter image description here

Размеры текста и видео очень малы, я не вижу возможности увеличить размер шрифта веб-просмотра, пожалуйста, предложите решение этой проблемы.

1 Ответ

1 голос
/ 09 апреля 2020

Вы можете добавить NavigationDelegate для WKWebView , чтобы изменить размер шрифта веб-просмотра.

Как следует: 

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);
    }

}

Эффект по умолчанию:

enter image description here

Эффект 200%:

enter image description here

======= ========================== Update ======================= ===========

Если вы хотите изменить размер каждого элемента Html, вы можете добавить стиль заголовка перед содержимым Html.

. : 

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 эффект:

enter image description here

начальная шкала = 1,5 эффект:

enter image description here

======================================= Обновление ===== =============================

Если вы хотите, чтобы ширина видео соответствовала размеру экрана, я предлагаю решить эту проблему от Html код сукре. Поскольку есть CSS стилей для использования Html. Например, если добавить style='width:100%;' для Видео в Html, видео будет соответствовать ширине экрана следующим образом:

enter image description here

Полный код 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>";

========== ==================== Update ============================= ===

Если не удается изменить код Html, также можно использовать WKNavigationDelegate, чтобы получить video объект из html, чтобы изменить значение для них.

Как следует: 

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);
    }

}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...