Is it possible to make rem units respect the OS-level "Text Size" setting in iOS Safari without changing the text size on macOS Safari?
I'm looking for a solution that doesn't rely on OS detection.
Context
User-specified font scaling, set at either the browser or OS level, can normally be respected using rem units. For example, if you want a paragraph that respects a user's font size setting, you can specify:
p {
font-size: 1rem;
}
Users who have their OS/browser set to display larger font will now see this paragraph as having larger font.
Desktop Chrome, for example, has a browser-level setting that lets you change the font size, and rem units will scale accordingly.
On iOS there is "Text Size" setting under "Display & Brightness" that allows users to scale text.
The problem is that iOS Safari doesn't scale rem units when the "Text Size" setting is used.
One workaround I've seen on the web is to set:
html {
font: -apple-system-body;
}
This solution does make iOS Safari respect the "Text Size" setting, which is great.
But it introduces a new problem on macOS: it sets the value of 1rem to be 13px rather than 16px. The consequence is that all text will display much smaller on macOS.
OS Detection
One solution would be to try to determine the OS in some way, and scale text on macOS back up.
OS detection, while useful on occasion, is not a best practice. And from a practical standpoint Apple is intentionally making it more difficult to detect whether a user is on iPad vs. Mac. For these reasons I consider OS-detections solutions to be less-than-ideal.
This is also basic a11y functionality, so my expectation is that there would be a simple solution to "enable" rem units in Safari.