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.
Frage
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" />
Lösung
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.