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?

Cusk

Does CSS served within an iframe detect device orientation? I've never tested it. Could narrow your problem down to a support or implementation problem. – Oligarch

This is kind of what I've been thinking, but it does seem to detect the landscape media query-just uses that for both. Overrides the default css with this. Wouldn't it just ignore the media query if it didn't support? – Cusk

Ive seen a few posts that suggest what you are saying like this: #12185573 – Cusk

But Im not 100% sure as I said because it is pulling in the landscape css AND ONLY the landscape css. If i have just the portrait media query it prefers the default css. But if I have landscape media query it will do that overriding the default. So it must recognize the query- and the regular css works to modify the content in the iFrame (its calling another html file in the project) What am I missing here? So weird. – Cusk

Answer 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

Infanta

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

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. – Cusk

Answer 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

Coalesce