1

I want to use CSS style to detect the page orientation in printing and then apply different styles when user choose different orientations (landscape or portrait).

@media print{ /*portrait*/  /*landscape*/}

Is there any way to do that?

Thanks

Fangming Du
  • 23
  • 1
  • 4
  • Wait...how would this look different when printed? It's not clear what the use-case is for this, Are you trying to do this - http://stackoverflow.com/questions/20361384/detecting-printed-page-size-with-css-media-queries?rq=1 – Paulie_D Mar 24 '15 at 21:58
  • @Paulie_D It seems like the same general idea, except rather than testing for specific sizes, it's just testing if the width is longer than the height or vice versa. – eritbh Mar 24 '15 at 22:08

1 Answers1

7

Use the orientation: ... media selector. Here's an example:

@media print and (orientation: portrait) {
    /* Your code for portrait orientation */
}
@media print and (orientation: landscape) {
    /* Your code for landscape orientation */
}
eritbh
  • 636
  • 1
  • 10
  • 18