Gotcha of the Day: Android and iPhone Render Fonts and Images At Different Sizes

I was working on a mobile site for a client of mine and he kept reporting that the font sizes were just too small. So I cranked them up from 14px, to 25px and finally to 40px. This looked great on his iPhone, but was gigantic on my Android myTouch.

As we worked away on the site, we noticed other issues with images and padding. Aha! It hit me one night, he's got his browser zoomed out and mine zoomed in.

Confirming this turns out to be harder than one would think. The iPhone provides an easy way to generate a screenshot, but I've yet to see this with the Android. Finally, I just took out my digital camera and snapped some photos of the screen.

Sure enough, we had a zooming mismatch.

This was one of those problems that I just couldn't imagine a fix for. After all, how can you coerce a browser, even a mobile one, into a zooming to a specific level? Surely that's a user control and off limits for HTML and JavaScript to set.

And I'd be wrong. A few minutes on Google turned up this gem: Disable Mobile Browser Zoom Function. And sure enough, you can drop some meta tags into your mobile site to force zooming. Specifically:

<meta content='True' name='HandheldFriendly' />
<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />
<meta name="viewport" content="width=device-width" />

With that code at the top of the page, both the iPhone and my Android myTouch rendered the page at 100% without a zoom option.

I could then tweak the fonts and other CSS on the page so that it looked consistent.