Basically what is this, embed html in an iframe pulled together by html 5 and javascript. The html in this iframe calls its own name other The css table of .css. The html file that pulls all this together is to call a style sheet named styles.css.
Obviously, I want the content area of this iframe to be smaller than the horizontal in the portrait view. .I use 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 it doesn’t even see the portrait css. I have tried more than a dozen different ways (this should be the right way, applicable to the styles of the entire page css adjustment), but it won’t recognize it. It will only use landscape. It’s not like it won’t see media queries, it pulls landscape css. But it won’t use portrait. It’s really weird. If you see green The bg is in portrait and landscape, it ignores portrait. If you see blue it works, please help!
By the way, if I get rid of the landscape css, it prefers the default settings of the screen. It does not make sense. Will iframe prevent it from pulling in new css when the positioning changes?
/* 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 is an explanation why you might not even be specific http://catharsis.tumblr.com/post/501657271/ipad-orientation- css-revised
If you go to iPad, http://eastcoworldwide.com/Proofs/mint/index.html, click to enter Chapter 1>Chapter 1>Start …You will see the Chapter 1 page after the loading screen.
Basically what is this, embed html into an iframe pulled together by html 5 and javascript. This iframe is html calls its own css table named other.css. The html file that pulls all this together is to call a style sheet named styles.css.
Obviously, I want to be in portrait view, The content area of this iframe is smaller than landscape. I use c in other.css ss:
@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 it doesn’t even see the portrait css. I have tried a dozen different ways (this should be the right way, styles.css adjustments applied to the entire page), but it doesn’t Will recognize it. It will only use landscape. It’s not like it won’t see media queries, it pulls landscape css. But it won’t use portraits. It’s really weird. If you see the green bg in portrait and landscape, it’s Ignore the portrait. If you see blue it’s working, please help!
By the way, if I get rid of the landscape css, it prefers the default settings of the screen. It does not make sense. Will iframe prevent it from pulling in new css when the positioning changes?
You should target the minimum or maximum device width, otherwise you will miss the device.
/* 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 is an explanation why you might not even be specific http://catharsis.tumblr.com/post/501657271/ipad-orientation-css-revised
< p>