CSS3 media query Tablet Orientation Portrait and Landscape

CSS media queries is it possible to detect portrait / landscape tablet mode?

given that in JS is pretty easy ....something like

if(window.innerHeight > window.innerWidth){
    portrait = true;
}else{
   portrait = false;
}

and i can use that...but i'm wondering if it is possible to do it using just css and @media styles

is it possible something like

@media only screen and (width > height) { 

//...

}

25down voteaccepted

Yes you do it: @media screen and (orientation:portrait) { … } @media screen and (orientation:landscape) { … } The CSS definition of a media query is at http://www.w3.org/TR/css3-mediaqueries/#orientation

@media all and (orientation:portrait) {
/* Style adjustments for portrait mode goes here */
}

@media all and (orientation:landscape) {
  /* Style adjustments for landscape mode goes here */
}

Ref Link:
http://stackoverflow.com/questions/5735467/css-media-queries-is-it-possible-to-detect-portrait-landscape-tablet-mode


Working Example code :
=================

/* #### Mobile Phones Portrait #### */
@media screen and (max-device-width: 480px) and (orientation: portrait){
  /* some CSS here */
}

/* #### Mobile Phones Landscape #### */
@media screen and (max-device-width: 640px) and (orientation: landscape){
  /* some CSS here */
}

/* #### Mobile Phones Portrait or Landscape #### */
@media screen and (max-device-width: 640px){
  /* some CSS here */
}

/* #### iPhone 4+ Portrait or Landscape #### */
@media screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2){
  /* some CSS here */
}

/* #### Tablets Portrait or Landscape #### */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px){
  /* some CSS here */
}

/* #### Desktops #### */
@media screen and (min-width: 1024px){
  /* some CSS here */
}

Thanks for Ref: