cordova-ios
cordova-ios copied to clipboard
Text Size from iOS Settings not honoured by Cordova
in iOS 13.6.0 you are able to change the "Text Size" of apps under "Settings"->"Display & Brightness"->"Text Size", however this not honoured in Cordova apps. This is honoured in Android as it injects the font-size style into the document DOM Element. I seem to recall this was working in previous iOS Versions when it was "regular" and "larger" settings, however this seems to be broken now.
Version information
Cordova-iOS 6.1.0 ionic-webview 5.0.0
Checklist
- [x] I searched for existing GitHub issues
- [x] I updated all Cordova tooling to most recent version
- [x] I included all the necessary information above
As far as I know, iOS only respect the resizing if you use font: -apple-system-body
on the texts you want to resize based on the adjustable font size.
More information about font: -apple-system-body
on https://webkit.org/blog/3709/using-the-system-font-in-web-content/
For Capacitor v3 you can use the @capacitor/text-zoom plug in. getPreferred() will return the text size adjustment in a percentage (1=default size; the user can reduce it or go all the way up to 3.3). You then call set() on the plugin to apply this setting to the web control that hosts the ionic app.
The plugin adds a -webkit-text-size-adjust property to the body element in the DOM. This property is only support on mobile (desktop ignores) and affects how text is rendered.
Using this method allows you to use custom fonts (in case this is important for branding, etc)
I've marked this issue as stale because it's been over a year with no further comments. If this is still an issue in the latest cordova-ios version and an up-to-date iOS version, please let us know. Otherwise, this issue will be closed.
For dynamic text size to work in WKWebView, you must use the Apple system font keywords as linked above.
Closing as stale.