HTML/CSS - Landscape and Portrait options

Question

I have a html page and a linked css page, they are displaying and printing perfectly (in portrait) when linked.

When I chose the the landscape option, it displays the same way, but it prints very badly, due to page break and spacing that I have set.

My question is, is it possible to have different css pages for different page orientations? If so, is there other options that I should be adding to the HTML/CSS link?

There are multiple options, check this post: http://stackoverflow.com/questions/138422/landscape-printing-from-html — Robbin van der Jagt, Jun 30 '16 at 13:25

score 0 · Answer 1 · answered Jun 30 '16 at 15:30

You can use one css file , and you can specify css class for each device for example and for each orientation : like this:

/* Portrait and Landscape */
@media only screen and (min-device-width: 320px) and (max-device-width:480px) and (-webkit-min-device-pixel-ratio: 2) {

 }

/* Portrait */
@media only screen and (min-device-width: 320px) and (max-device-width:480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
  }

/* Landscape */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
}

HTML/CSS - Landscape and Portrait options

1 Answers1