iOS font is tiny in iOS web browser


#1

We bundle various HTML help files into our app, and we use the WebBrowserComponent to show these help files. We recently migrated from Juce 3 to Juce 5.2.1, and we noticed that the font for these help files had become tiny on iOS.

I dug through the commit logs a bit for modules/juce_gui_extra/native/juce_mac_WebBrowserComponent.mm, and it looks like commit 05a3ebc4ebe7e732ac1fde171d1483365bf41032 is what caused the problem. It added these lines:
#if JUCE_IOS
[webView setScalesPageToFit:YES];
#endif
If these lines are removed, the problem goes away.

Now to give you all an example of what the problem looks like. I’ve attached a simple HTML file without any CSS or other formatting, and a screenshot of what it looks like on iOS on an iPhone 6.

I had to give the HTML file a txt extension so that I could upload it.

HelloWorld.txt (2.8 KB)


#2

Scaling the page to fit is important if you are doing more adventurous layout in your HTML, otherwise things like flexbox cannot correctly adapt to the size of the window.

The best way to fix this would be to add some CSS (or inline styles) to reduce the width of your outer container or increase your font size.


#3

The problem is that increasing the font size in CSS was having no effect at all. That was the first thing I spent hours fiddling with.

There are several methods in different classes that only do things on certain platforms. For example you can only convert a String to a CFStringRef on OSX. I think this browser behavior is something that a client should be able to enable through a method call, and perhaps that method is only available on iOS if that’s the only platform where this is applicable.