if you go here on the iPad, http://eastcoworldwide.com/Proofs/mint/index.html and go to Chapter1> Chapter 1> Getting Started ... you'll see after the download screen on page 1 of the chapter.
Basically what it is, html is embedded in an iframe, hidden html 5 and javascript. The html in this iframe calls its own css sheet called other.css. The html file that combines all this calls up a stylesheet called styles.css.
Obviously, I want the content area of this iframe to be smaller in portrait mode than in landscape. I am using 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 seems that the css portrait doesn't even seem to see it. I tried a dozen different ways (this should be the right way and works for styles.css settings on the whole page), but it won't recognize it. He will use only the landscape. Its not like he doesn't see media queries, he draws a css landscape. But DO NOT use a portrait. Very strange. If you see green for bg in the portrait and landscape, this ignores the portrait. If you see a blue job, please help!
By the way, if I get rid of the css landscape, he prefers a portrait by default. no difference. Can an iframe prevent it from being pulled into a new css when changing orientation?
css ipad orientation portrait landscape
user1864698
source share