On iPhone IOS 13 and iPadOS, Safari has tappable "AA"on the left of the web address bar.
Tapping it allows the user to enlarge or decrease the text and other element size.
If we decided our website actually looked better at 115% on iPhones and iPads after playing with that AA feature, what would we need to do to our existing CSS and HTML?
We tried the unsupported CSS:
zoom:115%;
on body, HTML and (body, html) but it didn't do anything until it was 120%, and even then the font sizes stayed the same.
What exactly does the iOS AA functionality do technically so we can mimic it? I did ask someone on Medium if that feature was programatically accessable but he said no.
UPDATE 1:
Based on the first comment below, I used:
<meta name="viewport" content="initial-scale=1.15, user-scalable=no, maximum-scale=1.15, viewport-fit=cover" />
and it worked on iOS iPad Safari. I did have to remove:
width=device-width
from that Meta though so the page wasn't too wide. Otherwise a horizontal scroll bar appeared and some content was over the page to the right.
Firefox Windows desktop had no effect for some reason.
And also when I rotated the iPad into Portrait view, the page items actually appeared smaller than when the initial-scale and max-scale was originally set to 1. Maybe 15% smaller. When I rotated it back to landscape the items were 1.15% larger than the orginal (e.g. the Meta tag above seemed to work for that).
FWIW: I think this has something to do with window.devicePixelRatio, at least this is what value changes on desktop browsers (by entering the above in the console) when you use the browsers zoom in/out functionality.
Not sure how to set this value programatically though. Oddly enough, when using the Aa zoom feature on iOS and inspect via Safari > Develop > iPhone on a Mac, entering window.devicePixelRatio always seems to return 2.
This also may be worth looking into if it hasn't been setup correctly: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag