Xamarin 表单:Webview 内容默认大小太小 [英] Xamarin forms: Webview content default size is too small
问题描述
我正在使用 webview 自定义渲染器在 UI 上显示 HTML 数据.webview 内容的默认大小太小.
我的代码:
MyWebView.cs
公共类 MyWebView : WebView{公共静态只读 BindableProperty UrlProperty = BindableProperty.Create(属性名称:网址"，返回类型:类型(字符串)，声明类型:类型(MyWebView)，默认值:默认(字符串))；公共字符串网址{获取{返回(字符串)GetValue(UrlProperty)；}set { SetValue(UrlProperty, value);}}}ios 中的 MyWebViewRenderer.cs
公共类 MyWebViewRenderer : ViewRenderer{WKWebView _wkWebView;protected override void OnElementChanged(ElementChangedEventArgs e){base.OnElementChanged(e);如果(控制==空){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>web_view.Url = "htmldata"; 输出截图
文本和视频的尺寸非常小，我没有看到任何增加 webview 字体大小的选项，请针对此问题提出解决方案.
可以为WKWebView添加NavigationDelegate来修改webview的字体大小.
如下:
protected override void OnElementChanged(ElementChangedEventArgs e){base.OnElementChanged(e);如果(控制==空){var config = new WKWebViewConfiguration();_wkWebView = new WKWebView(Frame, config);_wkWebView.NavigationDelegate = new MyNavigationDelegate();SetNativeControl(_wkWebView);}}公共类 MyNavigationDelegate : WKNavigationDelegate{public override void DidFinishNavigation(WKWebView webView, WKNavigation navigation){string fontSize = "200%";//>100% 显示比以前更大string stringsss = string.Format("document.getElementsByTagName('body')[0].style.webkitTextSizeAdjust='{0}'", fontSize);WKJavascriptEvaluationResult handler = (NSObject result, NSError err) =>{如果(错误！= null){System.Console.WriteLine(err);}如果(结果！= null){System.Console.WriteLine(result);}};webView.EvaluateJavaScript(stringsss, handler);//base.DidFinishNavigation(webView, 导航);}} 默认效果:
200% 效果:
==================================更新==================================
如果要对 Html 的每个元素进行调整，可以在内容 Html 之前添加标题样式.
如下:
string headerString = "例如，你可以修改headerString里面的initial-scale的值.下面是示例效果:
string headerString = "initial-scale=1.0 效果:
initial-scale=1.5 效果:
==================================更新==================================
如果想要视频的宽度适合屏幕，我建议从 Html 源代码处理这个.因为有 CSS 样式供 Html 使用.例如，如果为 Video 添加 style='width:100%;' 在 Html 中，视频将适合屏幕宽度如下:
Html的完整代码:
string bodyString = "<html><body><h1>Xamarin.Forms</h1><p>欢迎使用 WebView.</p><video style='width:100%;'src='movie.ogg'controls='controls'></video></body></html>";==============================更新==================================
如果无法修改Html的代码，也可以使用WKNavigationDelegate从html中获取video对象来修改值.>
如下:
公共类 MyNavigationDelegate : WKNavigationDelegate{public override void DidFinishNavigation(WKWebView webView, WKNavigation navigation){//100% 宽度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) =>{如果(错误！= null){System.Console.WriteLine(err);}如果(结果！= null){System.Console.WriteLine(result);}};webView.EvaluateJavaScript(stringHtml, handler);}}I am using a webview custom renderer for showing the HTML data on UI. The default size of the webview content is too small.
My Code:
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 in 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 and XAML.cs
<local:MyWebView
x:Name="web_view"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
</local:MyWebView>
web_view.Url = "htmldata";
Output Screenshot
The text and video sizes are very small, I don't see any option for increasing the font size of webview, please suggest a solutionn for this issue.
You can add NavigationDelegate for WKWebView to modify font size of webview .
As follow:
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);
}
}
The default effect :
The 200% effect:
=================================Update==================================
If want each element of Html to be reszied , you can add a header style before the content Html .
As follow :
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
...
For example , you can modify the value of initial-scale inside the headerString .Follow is the sample effect :
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 effect :
initial-scale=1.5 effect :
=================================Update==================================
If want the width of Video fit the screen , I suggest that dealing this from Html soucre code . Because there are CSS styles for Html to use .For example , if adding style='width:100%;' for Video in Html , the Video will fit the width of screen as follow :
The full code of 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================================
If unable to modify code of Html , also can use WKNavigationDelegate to get video object from html to modify value for them .
As follow :
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);
}
}
这篇关于Xamarin 表单:Webview 内容默认大小太小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
