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 che

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/