Xamarin Forms UIWebview 文本非常小
Xamarin Forms UIWebview text is very small
我有一个 Xamarin 表单应用程序,在不同的屏幕上都有网页视图。突然,我在webview上的字体在iOS上非常小。在所附的图片上,文字几乎占据了整个屏幕。现在还不到一半。
我没有 iOS 的自定义渲染。在 Android 上工作正常。有人有想法吗?
如果在Xamarin.iOS中使用UIWebView,可以使用EvaluateJavascript
修改Text的字体大小。
webView.LoadFinished += WebView_LoadFinished;
private void WebView_LoadFinished(object sender, EventArgs e)
{
var webView = sender as UIWebView;
string fontSize = "100%"; // 100% is the size of font
string stringFont = String.Format(@"document.getElementsByTagName('body')[0].style.webkitTextSizeAdjust= '{0}'", fontSize);
webView.EvaluateJavascript(stringFont);
}
如果在Forms中,需要使用WkWebViewRenderer来实现:
this.NavigationDelegate = new NavigationDelegat();
public class NavigationDelegat : WKNavigationDelegate
{
public override void DidFinishNavigation(WKWebView webView, WKNavigation navigation)
{
string fontSize = "100%"; // 100% is the size of font
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);
}
}
但是:我认为这应该通过修改html文件来解决。一般来说,网页
匹配 iOS 和 Android 时需要对 html 的样式做一些处理。因为iOS只是以默认的字体大小显示,与Android相同,所以在显示的时候有一些不同。 html设计者需要考虑它可以完美地用于iOS或Android。
===============================更新============= ===========================
I am creating/pushing the HTML content into the webviews.
如果加载webview时使用Html
字符串内容,可以在内容Html
前添加header样式。
如下:
string headerString = "<header><meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no'><style>img{max-width:100%}</style></header>";
string finalHtml = headerString + baseHtml ; //baseHtml is current loaded Html
...
比如可以修改headerString
里面的initial-scale
的值,下面是示例效果:
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 bodyString = "<html><body><h1>Xamarin.Forms</h1><p>Welcome to WebView.</p></body></html>";
string finalHtml = headerString + bodyString;
...
initial-scale=1.0:
initial-scale=2.0 :
我有一个 Xamarin 表单应用程序,在不同的屏幕上都有网页视图。突然,我在webview上的字体在iOS上非常小。在所附的图片上,文字几乎占据了整个屏幕。现在还不到一半。
我没有 iOS 的自定义渲染。在 Android 上工作正常。有人有想法吗?
如果在Xamarin.iOS中使用UIWebView,可以使用EvaluateJavascript
修改Text的字体大小。
webView.LoadFinished += WebView_LoadFinished;
private void WebView_LoadFinished(object sender, EventArgs e)
{
var webView = sender as UIWebView;
string fontSize = "100%"; // 100% is the size of font
string stringFont = String.Format(@"document.getElementsByTagName('body')[0].style.webkitTextSizeAdjust= '{0}'", fontSize);
webView.EvaluateJavascript(stringFont);
}
如果在Forms中,需要使用WkWebViewRenderer来实现:
this.NavigationDelegate = new NavigationDelegat();
public class NavigationDelegat : WKNavigationDelegate
{
public override void DidFinishNavigation(WKWebView webView, WKNavigation navigation)
{
string fontSize = "100%"; // 100% is the size of font
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);
}
}
但是:我认为这应该通过修改html文件来解决。一般来说,网页 匹配 iOS 和 Android 时需要对 html 的样式做一些处理。因为iOS只是以默认的字体大小显示,与Android相同,所以在显示的时候有一些不同。 html设计者需要考虑它可以完美地用于iOS或Android。
===============================更新============= ===========================
I am creating/pushing the HTML content into the webviews.
如果加载webview时使用Html
字符串内容,可以在内容Html
前添加header样式。
如下:
string headerString = "<header><meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no'><style>img{max-width:100%}</style></header>";
string finalHtml = headerString + baseHtml ; //baseHtml is current loaded Html
...
比如可以修改headerString
里面的initial-scale
的值,下面是示例效果:
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 bodyString = "<html><body><h1>Xamarin.Forms</h1><p>Welcome to WebView.</p></body></html>";
string finalHtml = headerString + bodyString;
...
initial-scale=1.0:
initial-scale=2.0 :