Fixing small text on iOS WKWebView’s in Xamarin.Forms
Even though Apple have extended the deadline to remove UIWebView’s from apps until December, the requirement to update things is still there and I’m finding a lot of clients wanting to get ahead of things and move on.
On several apps I work with there is HTML content within the app that’s maintained by non-technical people via various backend services and CRM’s. When entering text that they expect to look like all other text in the app, the WKWebView is displaying it in an extremely small size that is almost unreadable on devices.
Now I don’t know about everyone else but I’ve very rarely worked on an app that doesn’t have a web view custom renderer in it for some purpose or another so fixing this up has been pretty straight forward. If you don’t have a renderer already though it’s very simple to add one to fix up this text sizing issue for iOS and get the text looking clearer.
All we need to do is to override the LoadHtmlString method and add a small bit of meta HTML to the start of whatever content is being loaded and everything then looks normal again.
And with this the text starts to look a lot more readable:
So there you go, quick and simple fix to iOS web views if you find you have this issue in your app. As a bonus if you wanted to play with more default styling (fonts, colours etc) you can inject this into every web view (or write a custom control for just some) and get a nice consistent look and feel throughout your apps.
As usual, if you want the entire working example, please have a look here on GitHub.
Matt has been developing software for over 17 years and these days specialises in cross-platform app development. He's developed dozens of apps on several of the app stores with apps hitting #1.
Matt's worked for large software companies and enterprise organisations, the Australian government as well as various startups on cutting edge technology.
Originally from New Zealand, Matt currently lives in Brisbane with his wife, daughter and two dogs.