Android browser ignores responsive web design

Question

I just started convert my website having 'Responsive Web Design'. I installed the "Web Developer" Plug-in for Firefox ( http://chrispederick.com/work/web-developer/ ) to check, if it's working. Everything looked fine.

Now I tried this with my android phone. I didn't work correctly for portrait mode... I tracked the problem down to wrong handling of the @media-selectors at the phone:

This page ( https://worldtalk.de/m/test.php ) generates a CSS that outputs what height/width and device-height/width + orientation the browser using as parameters.

I got the following results:

• portrait, 800x1200
• landscape, 800x400

The orientation was correct, the width/height and device-width/height were the same for both orientations. But the device (HTC Desire Z) just uses a wrong screen resolution (800x1200) for portrait mode. I would like to avoid having a device database with user-agents or something like that.

Additional Information:

• Browser-Version: WebKit/533.1
• Android 2.3.3 / Sense 2.1
• HTC Desire Z (T-Mobile firmware)
• JavaScript reports identical screen resolution

Questions:

• Is this only my phone model or a general behavior of the android browser?
• How to fix this?

Answer 1

After some more investigation on that topic I found the following solution. You need to put in the following <meta>-Tags to tell the browser to disable the scaling. Then the CSS @media selectors are working as expected.

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

See: How can I "disable" zoom on a mobile web page? And: http://garrows.com/?p=337 (EDIT: http://garrows.com/blog/disable-mobile-browser-zoom-function

Regards,

Stefan

-- edit --

When applying the above solution: For some devices the device-resolution reported when using "scale=1.0" is lower than the physical screen resolution and you'll possibly have effects like blurred pictures. This is caused by the higher dpi (dots per inch) of the screen. The screen size reported in JavaScript is however correct. For small screens with high resolution the correct "physical pixel" resolution can be achieved by using:

<meta name="HandheldFriendly" content="true">
<meta name="viewport" content="width=device-width, initial-scale=0.666667, maximum-scale=0.666667, user-scalable=0">
<meta name="viewport" content="width=device-width">

However, this should cause problems with screen where the dpi-value is lower. It seems safer to use the screen resolution reported by JavaScript.

-- edit --

Use commas instead of semicolons to avoid Chrome console errors about 'Viewport argument value “device-width;” for key “width” not recognized. Content ignored.'

http://royaltutorials.com/viewport-argument-value-device-width-for-key-width-not-recognized-content-ignored/