css media query, switching between orientations breaks layout

Question

having a strange error -- When I start my tablet (using a Nexys 7 2013 model) in portrait it loads the correct stylesheet, and when I switch to landscape it loads that correct style sheet, but then when I switch back to portrait it doesn't load the portrait stylesheet anymore. What gives?

Relavant code:

<link rel="stylesheet" type="text/css"
      media="only screen and (max-device-width: 800px) and (-webkit-min-device-pixel-ratio: 2.0) and (orientation: portrait)"
      href="tablet_portrait.css">
<link rel="stylesheet" type="text/css"
      media="only screen and (max-device-width: 800px) and (-webkit-min-device-pixel-ratio: 2.0) and (orientation: landscape)"
      href="tablet_landscape.css">

Is there some kind of code I need to put in to determine what to load when going back from whatever orientation I switched to? I have not tested it on a phone layout, but I'm assuming it does the same thing.

Thanks!

Answer 1

I don't have a nexus-7 to test, but in this case I would try using one stylesheet for your media queries and list them like below. This way the web page will not have to worry about switching back and forth between sheets.

@media="only screen and (max-device-width: 800px) and (-webkit-min-device-pixel-ratio: 2.0) and (orientation: portrait) {
    styles here...
}

@media="only screen and (max-device-width: 800px) and (-webkit-min-device-pixel-ratio: 2.0) and (orientation: portrait) {
    styles here...
}