问题
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 of a span wrapped around a text character. The newest version of mobile Safari provides a font resize control and its zoom mechanism isn't triggering my detection js. Any ideas about events or other changes that I can use to detect mobile Safari's font resizing? Maybe a css media query? I tried a solution based on js intersectionobserver: worked on desktop but not mobile :-(
回答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.
回答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.
来源：https://stackoverflow.com/questions/58313462/does-ios-mobile-safari-provide-a-javascript-event-or-a-media-query-for-its-font