xamarin.forms - Xamarin Forms UIWebview 文本非常小

标签 xamarin.forms webview uiwebview

我有一个 Xamarin 表单应用程序,其 WebView 位于不同的屏幕上。突然间,我在 iOS 上的 webview 上的字体变得非常小。在所附图片上,文字几乎占据了整个屏幕。现在还不到一半。

我没有针对 iOS 的自定义渲染。在 Android 上可以正常工作。有人有想法吗?

Image

最佳答案

如果在 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的style做一些处理。由于iOS只是以与Android相同的默认字体大小显示,因此它们在显示时存在一些差异。 html设计者需要考虑它可以完美地在iOS或Android中使用。

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

I am creating/pushing the HTML content into the webviews.

如果在加载 webview 时使用 Html 字符串内容,您可以在内容 Html 之前添加标题样式。

如下:

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=1.0

initial-scale=2.0:

initial-scale=2.0

关于xamarin.forms - Xamarin Forms UIWebview 文本非常小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59439631/

相关文章:

android - epub 阅读器中的书签?

ios - 需要一种正确构建 NSURL 的方法

c# - 在 Xamarin.Forms 上制作一组动态的 3 个选择器

c# - Xamarin.Forms 中未显示 Android 权限对话框

java - 如何通过单击按钮更改 webview 的 url?

javascript - 即使使用 setJavascriptEnabled(true) 和 WebChromeClient,Android webview 也会跳过 javascript

html - UIWebView 框架高度基于内容高度

iphone - Webview 中的 PDF 性能

c# - Xamarin.Forms 选择器默认值

c# - 方法提前返回,未完成