Mobile Screen Device Width

Question

I have done my research on mobile screen widths but there is something I can't quite have a direct answer too.

Take the iPhone 4 for example, at this site it has a width of 640px and a height of 960px. However it has a device width of 320px. What is a device width? I'm making a responsive website and this device width seems to be a key part. Is the device width a size given so that websites scale properly? its smaller then desktop sites, other wise they would scale to the same resolution as a desktop monitor nearly? Can some body please explain the device width in relation to the actual width and if possible in context of responsive web design and the view port meta tag.

Answer 1

it is because you didn't set the viewport. More on that here: https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag

Try to add this meta tag to your head section and it should solve your issue:

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