Search code examples
xamarin.formswebviewuiwebview

Xamarin Forms UIWebview text is very small

I have a Xamarin forms app with webviews on different screens. Suddenly, my font on the webview is very small on iOS. On the image attached, the text was occupying almost the entire screen. Now it's less than half.

I don't have a custom rendered for iOS. On Android is working correctly. Anyone has ideas?

Image

Solution

  • If using UIWebView in Xamarin.iOS , you can use EvaluateJavascript to modify font size of 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);
}

    If in Forms , you need to use WkWebViewRenderer to implement it :

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

    However :I think this should be solved by modifying html file . Generally , webpage when matching iOS and Android need to do something about style of html . Because iOS just show with default size of font the same with Android , there are some different between them when showing . The html designer need to consider it can be used in iOS or Android perfectly.

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

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

    if using Html string content when load webview , you can add a header style before the content Html .

    As follow :

    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
...

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