I’ve been using html {-webkit-text-size-adjust: 100%;} to prevent the iPhone and iPad from inflating some fonts and not others. This seems to be a well-accepted solution online. Should I expand that to include moz and ms browsers?
html {-webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}
Typically you only need to worry about WebKit as that seems to be only engine that tends to adjust text sizes, on IE mobile and stock android browsers (and Firefox) I’ve never seen the issue occur before.
Thanks Chris. Do you think it’s safe to throw them in there anyway?
Hi,
You can find more information at the mozilla site here.
As is is an experimental technoilogy you always use it at your own risk but its unlikely that any harm will come from it unless of course the spec changes; but that’s the risk you run with most vendor prefixed code.
For WebKit devices I’ve seen no evidence of foul play as far as it causing issues with layouts and such but I would be careful around using the non-prefixed and -moz prefix’s as they may cause undesired results on desktop browsers, the best option would be to stick with -webkit-text-size-adjust as typically only WebKit browsers scale the fonts up.
I’m surprised there could be undesired results on desktop browsers. The following documents says “Only mobile browser do support this CSS property.”:
May I ask where you got that info?
You didn’t read all of it. 
If -webkit-text-size-adjust is explicitely set to none, Webkit-based desktop and tablet browsers, like Chrome or Safari, instead of ignoring the property, will prevent the user to zoom in or out the Web page
This is a big problem on desktop browsers, so it’s best to serve up -webkit-text-size-adjust: none; to small devices via media queries. (It’s safe to set it to 100% instead of none, though. However, I haven’t found 100% to work very well.)
Both boilerplate and bootstrap use just the following.
body{ -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%}
/* Prevent Webkit and Windows Mobile platforms from changing default font sizes, while not breaking desktop design. */
So you are reasonably safe to add the above code without harming desktop browsers.
Interesting. I guess I’ll have to revisit 100%, as I found it didn’t do much when I tested it a while back (I was still getting the ugly, random text resizing in mobile Safari).
While it may not break on desktop browsers now Chrome may implement it into their Blink engine soon but until someone does implement it the property is safe to use.
I must admit I’ve not done much testing (especially without owning a mobile) but I can’t believe that there is no merit in the technique especially when advocated by some distinguished authors. However if you look at the specs they say that percentage is at risk as it is not clearly defined.
There’s some more useful info here.
https://wiki.mozilla.org/CSS/text-size-adjust
I have never found the need. If I used it though it would be on a specific area. Not a broad stroke like on the body.
The problem is that you nver know when or where the device is going to decide to increase the font size. On the iPhone, at least, font size increases seem to be utterly random, where one paragraph is larger than another. It’s a very weird bit of behaviour that needs serious rethinking, as it’s nothing but a PITA IMHO.
I would be careful around using the non-prefixed and -moz prefix’s as they may cause undesired results on desktop browsers
On which browser does 100% cause undesired results?
Interesting. I guess I’ll have to revisit 100%, as I found it didn’t do much when I tested it a while back (I was still getting the ugly, random text resizing in mobile Safari).
On which WebKit browser specifically does 100% not work properly?
While it may not break on desktop browsers now Chrome may implement it into their Blink engine soon but until someone does implement it the property is safe to use.
Even once it is implemented on desktop browsers, “100%” should still be safe since it only defines a starting point for text size, unlike “none”. That is unless the spec changes.