CODEWITHSUNDEEP
cssipadorientationlandscapeportrait
user1864698
user1864698

Reputation: 81

Only landscape mode works in iPad portrait orientation (CSS)

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?

Upvotes: 8

Views: 10428

Answers (2)

Mark
Mark

Reputation: 2071

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

Upvotes: 1

apfrod
apfrod

Reputation: 341

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

Upvotes: 2

Related Questions