Xamarin.forms: [Bug] iOS text size in WebView is too small to read

[duindain]

Description

In the latest version 4.4.0.991265 text size in iOS in a WebView is significantly smaller almost too small to read, in previous versions the size matched Android and was normal font sizing

Steps to Reproduce

I've made a simple example project Its currently set to Forms 4.4.0.991265

1. Test it as is to see the issue where text is extremely small in iOS devices
2. Downgrade forms within the sample project to a lower version i.e. 4.2.0.709249

It should work as expected in the lower version but not the latest

Expected Behavior

Font size matches the previous version within reason between the different platforms

Actual Behavior

Font size in iOS is very small in webviews now

Basic Information

• Version with issue: 4.4.0.991265
• Last known good version:4.2.0.709249 I believe the latest production 4.3 was fine as well but I just created a blank forms project and it had 4.2 pre installed
• IDE: VS for Mac 8.3.11
• Platform Target Frameworks:
  
  
  
  • iOS: Xcode 11.2 Xamarin.iOS 13.6.0.12
  
  
  • Android: 10
  
  
• Nuget Packages:
• Affected Devices:iOS devices and simulators

Screenshots

XF 4.2.0.709249 | XF 4.4.0.991265
:-------------------------:|:-------------------------:
|

Reproduction Link

I've made a simple example project Its currently set to Forms 4.4.0.991265 if you test it as is then downgrade to a lower version it should work as expected in the lower version but not the latest
https://github.com/duindain/XamarinFormsiOSWebView

[TingtingAn]

Same issue here

[jfversluis]

Probably due to #7367

Workaround for now would be to go back to the legacy WebViewRenderer by adding this to your AssemblyInfo.cs in the iOS project: [assembly: ExportRenderer(typeof(WebView), typeof(Xamarin.Forms.Platform.iOS.WebViewRenderer))])]

[jfversluis]

Upon a bit of further investigation, I think this is something that is a change in behavior between UIWebView and WKWebView. Could you try adding <meta name='viewport' content='width=device-width,initial-scale=1,maximum-scale=1'/> in your page? This seems to fix it and I think is a correct way to go about it.

I'm trying to verify if this is indeed something that Apple did change.

[jfversluis]

So, it's not an official reference, but it seems that this is something that is changed between UIWebView and WKWebView, see this StackOverflow post: https://stackoverflow.com/questions/26102908/suppress-wkwebview-from-scaling-content-to-render-at-same-magnification-as-uiweb

I also created a native iOS sample that shows this behavior. The first tab shows the UIWebView, the second WKWebView and the third WKWebView with the HTML header. This backups the claim that this has changed between these views and is done by Apple.

WebViewViewPortTest.zip

I think the correct way to go about it is to add that HTML header. Therefore, I will close this for now. If you feel this is not correct, please feel free to add info about why and reopen.

Thanks! :)

[duindain]

Thanks @jfversluis adding the metatag resolved the issue, and thanks for the background on why it was happening as well :)

Cheers

[developer9969]

Hi
wondering if anyone can help, the text on the webView is too small, I have an HTML that I have NO control over.
How can I increase the size?

I have tried https://stackoverflow.com/questions/61114274/xamarin-forms-webview-content-default-size-is-too-small/61114750#61114750

but did not work for me as the page does not load at all.

Is this a bug?
Am I missing something?
Any suggestions

   <WebView VerticalOptions="FillAndExpand" 
     HorizontalOptions="FillAndExpand">               
    <WebView.Source>
        <HtmlWebViewSource
            Html="{Binding HtmlSource}" />
    </WebView.Source>
    </WebView>

    using Foundation;
    using WebKit;
    using Xamarin.Forms;
    using Xamarin.Forms.Platform.iOS;

    [assembly: ExportRenderer(typeof(WebView), typeof(MyWebViewRenderer))]
    namespace MyCompany
    {

        public class MyWebViewRenderer : ViewRenderer<WebView, WKWebView>
        {
            WKWebView wkWebView;

            protected override void OnElementChanged(ElementChangedEventArgs<WebView> e)
            {
                base.OnElementChanged(e);

                if (Control != null) return;
                var config = new WKWebViewConfiguration();
                wkWebView = new WKWebView(Frame, config) {NavigationDelegate = new MyNavigationDelegate()};
                SetNativeControl(wkWebView);
            }
        }
    }
    public class MyNavigationDelegate : WKNavigationDelegate
    {
        public override void DidFinishNavigation(WKWebView webView, WKNavigation navigation)
        {
            string fontSize = "200%"; 
            string stringHtml = 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(stringHtml, handler);
        }
    }

[duindain]

In iOS adding the metadata tag works and restores the proper Html sizing

We get the Html content then run it through a HtmlHelper that just checks for existing html tags then for head tags
then we check if it already has the meta tag

if it doesn't have html tag its just a small snippet of html so we add a boilerplate version then add the head and meta tag
if it does have html but no head we inject that with the meta tag

and so on

the basic takeaway is in iOS it has to have that metatag or it wont look right its a fairly simple fix just one line that you have to massage in

You can always control the html because you can fetch it in code then do anything you want to it then send it to the webview afterwards

[developer9969]

@duindain thank you very much for your reply. what you saying makes sense but a snippet example for me to build on would be brilliant.

I have also tried the following but made no difference

    public override WKNavigation LoadHtmlString(NSString htmlString, NSUrl baseUrl)
    {
        try
        {               
            var iOSHtmlWithScaling = htmlString.ToString().Insert(0, "<meta name='viewport' content='width=device-width,initial-scale=1,maximum-scale=1' />");
            return base.LoadHtmlString((NSString)iOSHtmlWithScaling, baseUrl);
        }
        catch (Exception ex)
        {
            System.Diagnostics.Debug.WriteLine(ex);
            return base.LoadHtmlString(htmlString, baseUrl);
        }
    }

[duindain]

I dont have permission to share our code unfortunately and its overly complex to post here with lots of support helpers in other classes and extensions

You can copy the html content as a string to a html file and work out what you have to do from that then make it automatic afterwards

Your current example with insert at 0 would put the meta tag above the html and head sections so it would make the html document invalid

I cant paste the html tags here but this is close enough, you need the meta tag in the head section of the html, if you are working with relatively known html content you can easily work out how to add it by looking for a specific tag or content thats always there and insert above or after, if the content is dynamic then you can just look for /head and add it above

html
  head
     meta ...
 /head
  body

 /body
/html

Our use case was quite a bit more difficult as the html is completely unknown where it could have no html tags at all or no head or could already contain the meta tag or not or any of those combinations

[developer9969]

@duindain thank you. I get it and now my html looks like but when I test it in the simulator there is no change

<html>
      <head>
               <meta name='viewport' content='width=device-width,initial-scale=1,maximum-scale=1'>
          </head>
      <body>
            <form >
                  <input etc...">
           </form>
      </body>
</html>

I am totally lost now of what else to do. I question if this should be fixed by the xamarin form team to make sure that their implementation properly scales..

[developer9969]

which event i can hook into in the renderer so that I can intercept the HTML and inject the metadata?
I mean each time a page is loaded into the web view I want to see the source and modify it?

[PaulsonMac]

https://github.com/xamarinhowto/FixSmallIosWebViewText