ios 4 website issue media query or viewport

Question

i have programmed a website, for a client and now im developing a smartphone template. I used max-device-width as media query to separate smartphone and tablet. Everythng is working fine, but iphone 4 zooms the website. I dont know if i defined viewport wrong or is a bug? Website is:http://mksgmbh.com I used following Viewport

<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, target-densityDpi=device-dpi' name='viewport' />
<meta name="viewport" content="width=device-width" />

I tried to set initial-scale to 1 but it doesnt work too.

Answer 1

As I look at the site now you have mulitple viewport tags. Try removing them all and replacing them with either

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

or if you want to prevent user zooming:

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

UPDATE
Also, in you media queries you use max-device-width, e.g.

@media only screen and (max-device-width: 760px) {
...
}   

Unless you are trying to target specific devices, you could try just

@media only screen and (max-width: 760px) {
...
}

Device width and width aren't the same thing and for responsive design, width will usually get the results you want. This link has some more background info about the differences

Hope this helps!