Support iOS dynamic type for all screen sizes #11934
Conversation
Co-authored-by: David Cortes <david.cortes@shopify.com>
sam-b-rose
force-pushed
the
include-ipad-ios
branch
from
11e2e37
to
8f09d87
Compare
| html { | ||
| font: -apple-system-body; | ||
| } | ||
| @supports (font: -apple-system-body) and (-webkit-touch-callout: none) { |
There was a problem hiding this comment.
Just wanted to confirm that this fix is only targeting Safari on iOS devices? We don't need to fix this on other browsers that iOS devices could be using?
There was a problem hiding this comment.
I'll test to confirm it but I think all browsers on iOS use Safari under the hood.
That is also the case for the webviews in the app.
There was a problem hiding this comment.
Oh fascinating! And sounds good!
There was a problem hiding this comment.
It's very new, and only available in the EU, but Apple has apparently opened the app store to non apple webkit browsers as of 17.4
| html { | ||
| font: -apple-system-body; | ||
| } | ||
| @supports (font: -apple-system-body) and (-webkit-touch-callout: none) { |
There was a problem hiding this comment.
Presumably this would also target iPad devices?
Some of the bigger iPads can go up to 2732x2048, which is quite a lot higher than the sm breakpoint of 490px (even accounting for @2x resolution scale) - is it intended to also use font: -apple-system-body on those larger devices?
There was a problem hiding this comment.
@jesstelford yes, the intention is to target iPads as well here. Based on my understanding on font: -apple-system-body, we do want this even for large screen set at the "root" level. This should apply the system's default body text style.
Curious to test this assumption— do different devices (iPhone/iPad) or screen resolutions make adjustment for the system text styles (caption, body, etc)?
There was a problem hiding this comment.
do different devices (iPhone/iPad) or screen resolutions make adjustment for the system text styles (caption, body, etc)?
A good question that I'm not sure about. The effects of font: -apple-system-body seem to be poorly documented unfortunately.
Might be safe to assume it works the same across all devices, and if we're happy this change will effect iPads, then let's 
This PR replaces the
@mediawith a@supportsrule to enable dynamic type for iOS devices larger than mobile (e.g., iPad).See
-webkit-touch-calloutMDN docsRelated to @davebcn87's comment here