Why is this android device enlarging text?

Question

The website is tavistockrestaurants.com. We are trying to make this design work well in popular mobile devices. A particular android device seems to be enlarging the text, and I am unsure why. This causes the "contact" link in the top to wrap, and causes unecessary line breaks throughout our website. Notice the form is getting pushed below the images in this screenshot? It's supposed to have white space on the bottom!

We do have -webkit-text-size-adjust: none in place for all elements (using asterisk *). Is there an android equivelant? Has anyone experienced this on any android devices?

This behavior does not occur on all android devices. We have only seen this on Android 4.x, but I cannot reproduce it with my android 4.0 emulator.

What it currently looks like:

What it should look like:

(I do not have the specific device model used in the screen cap)

Answer 1

Samuels answer is correct.

There is a workaround though. You can target specific devices and change the styles for that device specifically using classes or stylesheets. If you are using PHP you should be able to parse the "User-Agent" and determine which device the client is using and add a class to the body tag (and use that class to target that specific device in your CSS).

There are also services that will allow you to send users to a different version of the site depending on the device they are using. Here is a site that does the work for you.

There may also be device specific CSS being generated on loading the page. Using a CSS reset may also help your site be more cross-browser compatible.

Answer 2

In CSS, pixels are not pixels.

Or rather, 1 CSS pixel does not always map to 1 hardware pixel. On certain high-DPI Android devices, one CSS pixel can be 1.5 or 2 hardware pixels. The Opera guys have a good overview on the topic.