Does Ios/mobile Safari Provide A Javascript Event Or A Media Query For Its Font Resizing Control?

A responsive website that I style uses js to determine font sizes then applies classes that are used by css for various layout adjustments. In a nutshell, my js detects the resize

Solution 1:

According to MDN

The text-size-adjust CSS property controls the text inflation algorithm used on some smartphones and tablets. Other browsers will ignore this property.

Be sure to include CSS properties such as

/* Keyword values */
text-size-adjust: none;
text-size-adjust: auto;

/* <percentage> value */
text-size-adjust: 80%;

/* Global values */
text-size-adjust: inherit;
text-size-adjust: initial;
text-size-adjust: unset;

However, only non-percentage values are supported in Safari for iOS.

---

Also, consider looking at Apple's documentation. which explains how percentages for a text-resize factor can be used.

html {-webkit-text-size-adjust:200%}

I am not sure which one of these is correct since they conflict each other. You would have to true for yourself and see what works best for you.

PS: Be sure to include -webkit- prefix for mentioned properties to make sure it works for safari and other WebKit browsers.

Solution 2:

So what mobile safari does is: when the font is enlarged, it's actually the viewport becoming narrower. There is a widely supported window.matchMedia(media query here) method that returns a "media query object" to which a listener can be added. In my case, I want to know when the viewport is narrower than apx. 320px ... in which case I'll apply my styling classes.