I’ve been messing around with mobile design this weekend. And among some of the mind-bending media queries and cross device checking, I noticed that when I changed from portrait to landscape orientation on my iPhone, the font size seemed to scale up, upsetting the design.
After Googling around, as you do, I discovered a quick fix for this. It’s probably something that most mobile/responsive designers include as a matter of course these days, but simply adding this Webkit-specific line to your stylesheet fixes the awkward scaling issue when you rotate your phone screen:
body {
-webkit-text-size-adjust: none;
}Add the above to your existing body rules, and it’ll clear up orientation change weirdness.
Any other mobile design tips and tricks you want to share? Leave me a comment.
Gerard McGarry 