Only landscape mode works in iPad portrait orientation (CSS)

Question

If you go here on an iPad, and click through to Chapter1 > Chapter 1 > Get started... you will see after a loading screen the Chapter 1 page.

Basically what this is, is html embedded into an iframe being pulled together by HTML5 and JavaScript. the html in this iframe calls its own css sheet called other.css. The html file that pulls this all together is calling a stylesheet called styles.css.

Obviously I want in portrait view the content area of this iframe to be smaller than in landscape. I am using the css in other.css :

@media only screen and (device-width: 768px) and (orientation:landscape) {
    #content {background:green;}
}


@media only screen and (device-width: 768px) and (orientation:portrait) {
    #content {background:blue;}
}

The problem is that its like it doesn't even see the portrait css. I have tried a dozen different ways ( this is supposed to be the correct way and works for the styles.css adjustments to the whole page) but it will not recognize it. It will only use the landscape. Its not as though it wont see the media queries, it pulls the landscape CSS. But WILL NOT use the portrait. Really weird. If you see green for the bg in portrait and landscape its ignoring the portrait. If you see blue it's working. How can I achieve this?

If I get rid of landscape CSS, it prefers the default to the portrait. makes no sense. Could the iframe be hindering its pulling in new CSS upon orientation change?

Solution 1

You should target min or max device widths or you will miss out devices.

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

from http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Here's an explanation why you probably shouldn't even be that specific http://catharsis.tumblr.com/post/501657271/ipad-orientation-css-revised

Solution 2

what you could try doing is creating two different stylesheets specifically for desktop & Tablet so; <link rel="stylesheet" media="screen" href="css/stylesheet1.css"> <!--Desktop--> <link rel="stylesheet" href="css/tablet-nav.css" media="screen and (min-width: 800px) and (max-width: 1024px)"> <!--tablet-->

and dont forget to add;

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

http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/ http://webdesignerwall.com/tutorials/css3-media-queries

Comments

[user1864698]

Thanks for the help. Doesn't really address my question though. Still does the same thing. HELP!

[user1864698]

Ive tried this: <link rel="stylesheet" media="all and (orientation:landscape)" href="css/stylesheet1.css"> <link rel="stylesheet" media="all and (orientation:portrait)" href="css/stylesheet2.css"> Still only loads landscape.