meta name="viewport" doesn't work as expected

Question

I have that meta tag in my website www.ssd-vergleichen.de

<meta name="viewport" content="width=device-width; initial-scale=1.0;"/>

To prevent the device from initial zooming into the website. When watching the website on my chrome mobile browser on Samsung Galaxy S2, the website is beeing zoomed in about 400%. What did I do wrong? Can anyone help?

Thanks in advance

Edit: With using

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

it works in Android's standard webbrowser, but still not in Chrome. I wonder if it works in IOS?

Edit2: No, it also doesn't work with iOS http://iphonetester.com/

Answer 1

Try this :

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=320, height=device-height, target-densitydpi=medium-dpi" />

Answer 2

Have you tried

<meta name="viewport" width="device-width">

As I understand it width="device-width" constrains the width of the layout to the device width. Surely setting intial-scale=1 is then telling the browser to zoom 100% (i.e. not scaled)?

Update

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

Is intended to be used to scale responsive sites correctly. Considering your site is fixed to a width of 1100px, setting initial-scale=1 will not result in the whole page being visible.

From the W3C Use Meta Viewport Element To Identify Desired Screen Size