There’s nothing like wasting a Sunday morning searching the Internet for solutions to web page rendering issues on mobile devices. 🙁
Stopping an iPhone from resizing web page text
Nothing is more frustrating as a designer/developer to see a neatly laid out web page resize its font size when you don’t expect it. I thought this line of HTML would have solved the problem:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
No. Apparently you have to also add this CSS in:
body { -webkit-text-size-adjust: 100%; }
Adding inertial scrolling back to overflow:auto or overflow:scroll DIVs
It is a weird feeling to have a graceful UI somehow feel “stuck” when inertial scrolling gets disabled. Apparently setting the CSS property overflow to auto, scroll, scroll-x, or scroll-y will turn it off. This is how you put it back:
-webkit-overflow-scrolling: touch;
Ugh.