Mobile Website - Viewport depending on device-width - ios

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 */
}