Honoring Mobile OS Text Size

https://adrianroselli.com2/7/26About 5 minCSSArticle(s)blogadrianroselli.comcss

Honoring Mobile OS Text Size 관련

If your users scale the text size in Android or iDeviceOS, that doesn’t always affect the size of text on a web page. It’s a function of browser and authored code, as opposed to a standardized approach. That may be changing. Support The current state of affairs in the three…

Support

The current state of affairs in the three rendering engines…

Firefox on Android supports scaling a web page’s text if you adjust the system font size. It doesn’t seem to care if you use px units. You don’t need to do anything special; it just works.

Safari will not scale a web page’s text with the OS settings unless the author adds some CSS. This code points to the system font properties (such as size):

body {
  font: -apple-system-body;
  /* other styles, including font-family */
}

This feature query checks for support while trying to limit it to touch devices only, then sets the font size:

@supports (font: -apple-system-body) and (not (-webkit-touch-callout: default)) {
  :root {
    font-size: 100%;
  }
}

The rest of your styles have to use relative units or this breaks down.

Google has opted not to follow Firefox’s lead and support OS text sizes by default. Google has also opted not to mimic Safari and make platform-specific features. Instead, Google has decided to use its weight in the CSSWG to mint a new value for the <meta> element:

<meta name="text-scale" content="scale">

For this to work, however, the author will need to “opt-in” by not setting a base font size in your CSS:

body {
  /* font-size: yeah, no */
}

You actually can set one, but it should be a percentage. You then need to avoid fixed units (such as px) throughout your site. If this seems familiar, it’s the core thesis of my aptly-named post The Ultimate Ideal Bestest Base Font Size That Everyone Is Keeping a Secret, Especially Chet.

Info

Read Josh Tumath’s post Try text scaling support in Chrome Canary for more details.

Frankenstyle’s Monster

Let’s combine those into one set of code that will work in Safari and now Chrome. Firefox was always on point, so no effort needed there.

Add this HTML to the <head> of your page (it’s the CSSWG code):

<meta name="text-scale" content="scale">

Add this to the CSS of your page (it’s Apple’s code):

body {
  font: -apple-system-body;
  /* other styles, including font-family */
}
@supports (font: -apple-system-body) and (not (-webkit-touch-callout: default)) {
  :root {
    font-size: 100%;
  }
}

Done.

Frankenstyle’s Demo

I made a demo. It has images and a table. Visit the debug version (aardrian) in your mobile browser.

See Honoring Mobile OS Text Scale by aardrian on CodePen.

How to Test Frankenstyle’s Demo

Seriously, visit the debug version (aardrian) in your mobile browser. I’m not dealing with desktop here.

With your Android device, install Chrome Canary from the Google Play store. If you are using an Android device with another app store, I leave it to you to sort that out. Then, using chrome://flags, enable Experimental Web Platform Features in Chrome Canary.