CODEWITHSUNDEEP
cssmedia-queries
Stew
Stew

Reputation: 69

Difference between two media queries

According to CSS tricks, the media queries for an iPhone 4 is:

/* 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) {

}

My question is, what is the difference between /* Portrait and Landscape */ media query and the /* Portrait */, /* Landscape */ media queries? Wouldn't using /* Portrait and Landscape */ be enough?

Upvotes: 1

Views: 107

Answers (1)

Curtis
Curtis

Reputation: 103428

orientation is an additional condition depending on whether or not you wish to apply those styles for a view port currently in a portrait/landscape display.

The max-device-width: 480px property will apply even if you're in landscape mode.

For example you might not wish to change the styling in landscape mode due to there being less space "above the fold". In portrait mode you would be more likely to use a chunky header for example, whereas with landscape you may wish to use a more compact header to reduce real-estate usage.

In terms of the CSS Tricks documentation, they are just showing how you can target both portait & landscape, or just one of the other.

Upvotes: 1

Related Questions