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.