CODEWITHSUNDEEP
iphonehtmlcss
Alex Marchant
Alex Marchant

Reputation: 2510

Responsive width for iPhone

This is my first time building a responsive site, and as I tailor the CSS for the iPhone I'm running into a problem. The styles all apply correctly, the text changes size and the wrapper changes widths. The problem is the iPhone browser still opens up at a huge width, see the screenshot:

enter image description here

I'm using

@media all and (max-device-width: 480px) {}

to set the specific iPhone css. body {width:;} doesn't work.

Thanks for the help :)

Upvotes: 0

Views: 3403

Answers (1)

Doug
Doug

Reputation: 1028

You have to add the following to your page header

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

As in:

<!doctype html>
<html>
	<head>
		<title></title>
		<meta name="viewport" content="initial-scale=1.0, width=device-width" />
	</head>
	<body>
	</body>
</html>

Upvotes: 2

Related Questions