Search code examples
mobilemedia-queriesviewportmeta

Viewport properties not working for mobile website

So I've set some media queries that link to different style sheets, one for desktop, one for mobile which looks like this

<link rel="stylesheet" href="styles_phone_320.css" type="text/css" media="(max-device-width:320px)" />

My viewport meta tag looks like this 

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

and for some reason when I load the page on my iPhone 5 it looks great in portrait, but when I rotate it, it does not scale to fill the screen. Just white space to the right of all the content. What am I doing wrong?

Solution

  • I am answering this question a year later, though I probably found the solution about 6 months ago...

    All I had to do was remove initial-scale="1". That fixed it. You see, this lets the page grow in scale to meet the edges of the screen.