Mobile CSS inconsistency

HTML & CSS
1

I’m testing a mobile design on my computer, with ProtoFluid. Rapid Prototyping of Adaptive CSS and Responsive Design.. Here is a screenshot of the (work in progress) design, as seen with the webapp:

Here is how it is displayed on an actual iPhone 3GS:

Why is this happening?

2

Mobile phone browsers are a law unto themselves. There isn’t a huge amount of consistency between different browsers and different phones. Your best bet is to check it on a few of the most common ones and make sure it is usable - don’t worry if there are some differences, as long as people can use it.

3

I understand this, but the fact is that in this case it should work correctly on the iPhone (also because in the simulator it does work indeed). Let me show you the code.

In the HTML, inside the head section:


<link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px), only screen and (max-device-width: 480px)" href="css/mobile.css" />

And here’s the CSS:




	
	#login {
		display: none;
	}
	
	#login_mobile {
		display: inline;
	}
	
	#login_mobile form div label, #login_mobile form div input {
		float: none;
		margin: 0;
	}
	
	#login_mobile form div {
		margin: 0;
		width: 220px;
	}
	
	#login_mobile form input {
		width: 280px;
	}
	
	#login_mobile form input[type="submit"] {
		margin-top: 25px;
		width: 295px;
	}
	
	body {
		width: 320px;
	}

	#header {
		border: none;
		width: 320px;
	}
	
	h1 {
		border-bottom: 1px solid green;
		color: blue;
		font-size: 48px;
		margin: 0;
		text-align: center;
		width: 300px;
	}
	
	a {
		text-decoration: none;
	}
	
	/*#menu {
		border: none;
	}*/
	
	#menu li {
		font-size: 12px;
		margin: 0;
	}
	
	#menu li a {
		padding: 31px 3px 33px 3px;
	}
	
	#menu li a {
		background-color: #a0d9a7;
	}
	
	#menu li a:link {
		background-color: transparent;
	}
	
	#menu li a[href="inserisci.php"] {
		background-color: transparent;
	}
	
	#header img {
		display: none;
	}
	
	#mesi {
		display: none;
	}
	
	#mesi_mobile, #mesi_mobile li {
		display: inline;
	}
	
	#mesi_mobile li {
		padding-right: 12px;
	}
	
	#footer {
		display: none;
	}

As you can see, I specifically say that the elements should be 280px wide, but if I look at it on the iPhone they are not even half the screen wide.

4

Solved, I had to add the viewport meta tag in the HTML.