How do I get responsive CSS to fit the viewport when switching between portrait and landscape?

Question

Here's my goal: I want mobile styles for mobile devices in portrait mode, and non-mobile styles for landscape mode.

Here's what I did: I set up media queries to serve mobile styles to min-width 35em, and added a viewport meta tag that says "meta name="viewport" content="width=device-width, initial-scale=1"". The mobile/portrait CSS is 100% wide, and the non-mobile/landscape CSS is 980px wide.

Here's my problem: When I switch my mobile device to portrait mode, the non-mobile page doesn't fit the viewport and I have to zoom in to view the entire page. I want the non-mobile to fit the viewport initially without zooming.

What I've tried so far: Tried every variation of the viewport meta tag I could think of, added "html, body {width: 100%;}" to CSS. Any suggestions?

Answer 1

You can set up media queries based on device orientation like this:

/* Portrait */
@media screen and (orientation:portrait) {
    /* Portrait styles */
}
/* Landscape */
@media screen and (orientation:landscape) {
    /* Landscape styles */
}

Answer 2

From what I understand, you want different viewport settings for portrait and landscape. That is possible, but please test thoroughly since there are quirks (sorry, no quotes, this is from personal experience).

Make sure you have set your default viewport meta tag, and give it an id. Like:

<meta name="viewport" id="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1">

Then add a little Javascript to detect a change in orientation and to set the correct viewport mode. Something like:

window.addEventListener('orientationchange', doOnOrientationChange);

function doOnOrientationChange()
{
  var bPortrait = document.documentElement.clientWidth < document.documentElement.clientHeight;
  if(bPortrait)
  {      
    document.getElementById("viewport").setAttribute("content","width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1", minimum-scale=1");
  }
  else
  {
    document.getElementById("viewport").setAttribute("content","width=900px, user-scalable=yes, maximum-scale=2, minimum-scale=0.25");
  }
}

Note the viewport width set to 900px for landscape. Please adjust to the width of your website. You might also want to add this function to your document load event list in case someone already has his device in landscape mode ;-)

For detecting the orientation change, I suggest you read this article: http://davidwalsh.name/orientation-change

Then add the styles sheets using media queries. Since I guess the two are very different I suggest to use two files (maybe a third one for the general settings):

<link rel='stylesheet' media='screen and (orientation:portrait)' href='portrait.css' />
<link rel='stylesheet' media='screen and (orientation:landscape)' href=landscape.css' />

But @APAD1 suggestion also works of course.