Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support iOS dynamic type for all screen sizes #11934

Closed
wants to merge 1 commit into from

Conversation

sam-b-rose
Copy link
Member

@sam-b-rose sam-b-rose commented Apr 23, 2024

This PR replaces the @media with a @supports rule to enable dynamic type for iOS devices larger than mobile (e.g., iPad).

See -webkit-touch-callout MDN docs

Related to @davebcn87's comment here

html {
font: -apple-system-body;
}
@supports (font: -apple-system-body) and (-webkit-touch-callout: none) {
Copy link
Member

@lgriffee lgriffee Apr 23, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?
Screenshot 2024-04-23 at 10 51 00 AM

Copy link

@davebcn87 davebcn87 Apr 24, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh fascinating! And sounds good!

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@lgriffee lgriffee added the #gsd:40396 WebView infrastructure - Forms and Polaris label May 8, 2024
html {
font: -apple-system-body;
}
@supports (font: -apple-system-body) and (-webkit-touch-callout: none) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

Copy link
Member Author

@sam-b-rose sam-b-rose May 9, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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)?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 :shipit:

@sam-b-rose sam-b-rose closed this May 21, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
#gsd:40396 WebView infrastructure - Forms and Polaris
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants