DEV Community

Discussion on: How to support Apple's dynamic type in your web content with CSS

Collapse
 
colingourlay profile image
Colin Gourlay • Edited

I had exactly the same issue last week after upgrading to Big Sur.

It's not ideal, but I've added a "small display" qualifier to my implementations to try to only target iPhones (in portrait orientation)...

@supports (font: -apple-system-body) {
  @media (max-width: 719px) {
    html {
      font: -apple-system-body !important;
    }
  }
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
thepeoplesbourgeois profile image
Josh • Edited

I know that this is just a concession of using the best resource available for the problem at hand, but arrgh, the fact that the web standards board hasn't adopted a CSS filter for the width of the actual screen of a user's device yet has turned the mere act of browsing the internet into one of the most aggravating activities I regularly do for the ... [gestures vaguely] ... part of my life.

I have a 1920x1080 screen, and can't even put up two reference documents in split-view mode without both of them snapping to a single_column_flow layout that's "optimized" for tablets, and suddenly the article's lines go from being slightly longer than in an average paperback to running the entire width of a page in a cocktail table book.

Anyway. This is a useful CSS rule, thank you for sharing it on here 🦄💖🔖