I designed an app on a resolution of 640x960px which I am now converting into a working webapp for an iPhone 4S. As you may know, the iPhone 4s has got a resolution of 640x960px.
Why is it that when I use width=device-width in the meta viewport, which shouldn't downscale or upscale the design, the iphone uses a width of 320px instead of 640 pixels?
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
However when I use width=640 it forces the browser to use 640px as the width but that doesn't automatically change the width for other devices such as an iPad. This just doesn't make sense to me.
content="width=device-width"
will not scale up anything.It only changes the viewport's width. It seems the iPad is dumb in such cases as it thinks of width in device-width as 768px in landscape mode too.
In landscape mode setting a specific pixel value for iPad will scale it up 1.333. Use this and couple it up with responsive layout techniques
<meta name="viewport" content="width=device-width, initial-scale=1">
Also, what you are doing is correct. Just add specific code for layout. Made my life much easier.