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 :