ipad portrait orientation css, only landscape will

问题:

if you go here on an iPad, http://eastcoworldwide.com/Proofs/mint/index.html 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 html 5 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 its working please help!

BTW, 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?

回答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

回答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