Mobile Website - Viewport depending on device-width

Question

I have a mobile website and a little problem with the Viewport meta tag in the -Part.

My code:

<meta id="testViewport" name="viewport" content="width=640">

It is working fine on an iPhone 4s but on the iPad 2, it doesn't work properly. I want the viewport to be set as the width of the users hardware. Is there a way to achieve it or do I have to read out the model type and set the Viewport with a switch or if code?

Thanks in advance.

Niels

edit:

Here's my CSS. What I want to achieve: let the site be displayed in the device-width. but if the display-size is smaller than 640px, then it should change the viewport to 640px. Not working on iOS 7.0, Safari:

@viewport { 
    width: device-width;    
}
@media screen and (max-device-width: 640px) {
   @viewport {
     width: 640px;
   }
}

edit#2:

Fixed it using JS in the of the index.html:

<meta id="viewport" name="viewport" content="width=device-width" />
<script>
    if (window.innerWidth < 640){
    var vp = document.getElementById('viewport');
    vp.setAttribute('content', 'width=640');
    }
</script>

Answer 1

Instead of setting content="width=640" try this one <meta name="viewport" content="width=device-width">

UPDATE:

To serve high-res images / change zooming for retina devices with your css you could use something like this:

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
    /* Retina-specific stuff here */
}