Small "mobile" gadgets often have browsers that do strange things with font sizes. They sometimes draw different chunks of a page at a different font size, following rules that aren't very well documented, and seem to be different for different browsers.

One gimmick that seems to fix a lot of the problems is this in the header:

<meta name=viewport content="width=device-width, initial-scale=1">

This was a Safari kludge to turn off its "clever" heuristics to determine font sizes. The results were usualy pages formatted for a window much larger than the screen, which when "pinched" to screen size on an iPad or iPhone resulted in tiny, illegible text. The two pieces of the above meta command turned off this behavior, telling Safari to format the page for the device's screen's width, and to use the user's chosen font size "scaled" by a factor of 1.

This kludgery has been mimicked by most Android and IOS browsers. You'd think they'd show enough user-friendliness to make these meta settings the default, but they have mostly chosen to default to font sizes that are seriously user-hostile. For the forseeable future, this meta command seems to be the best way to get most browsers to behave sensibly about font sizes and page-rendering sizes.

It should be noted that the above meta tag isn't (yet) in any standard. So browser writers are free to ignore it, or misinterpret it however they like. But it's a bit of boilerplate that will make text layout behave sensibly on most small-screen browsers, and should be ignored by most other browsers.

This was found at developers.google.com, after a lot of googling and asking around on many forums. If any of this makes it into the html5 standards, it may well change.