Mobile Optimisation: Site wrapper fills screen at 1000px even though iPhone 5s screen is 640px?

Question

I am altering a site to be mobile optimised. I am currently testing on an iPhone 5C whose screen width (in portrait mode) is 640px.

However, when I set my sites #wrapper to width: 640px; the site only takes up about half of the screen. I have to set it to width: 1000px; for it to fill the phones screen.

#wrapper is the parent element of all elements so there is nothing on the outside of it to push the site outside of 640px. There is also nothing within #wrapper that is larger then 640px and I have set overflow:hidden just to be sure.

Would anyone know why this is occurring and what I can do about it?

The Media Query I am using is:

<link rel="stylesheet" type="text/css" media="screen and (device-aspect-ratio: 40/71)" href="css/ios5.css"  />

Answer 1

you must insert this tag into your html HEAD tag:

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

The reason is clearly explained here.