Ah yes, it's a very common issue, actually. Mobile Safari (and possible other browsers, too) has this habit of resizing bits of text any old how, seemly at random, supposedly to make it easier to read. I'm amazed they persist with it, as it's clearly borked, and I can't imaging anyone ever wanting this, so I always add the code above to avoid the mess it creates. :rolleyes:
I only serve it up to small screens, though, because if you use it without @media rules targeted at small screens it will affect Safari on the desktop—preventing users from resizing text—which is not good.
Some people recommend instead using -webkit-text-size-adjust: 100%; but I'm not convinced. It prevents the desktop Safari issue, but I've been told it has poor results on Android devices. Using -webkit-text-size-adjust: none; as shown above won't affect anyone adversely, except perhaps the few boffins who squeeze their desktop Safari browser down below 500px and try to increase font size. :lol: