3

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
  • 43
  • 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

9

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
  • 726
  • 1
  • 9
  • 18
  • 1
    You could nest the media queries `@media print { @media (orientation: landscape){ } @media (orentation: portrait) { } } ` – Justin Liu May 25 '20 at 14:55