What's the difference between "Portrait and Landscape" and "Portrait" or "Landscape?"

Bruce Gust
Bruce Gust used Ask the Experts™
on
Here's a guide that I got from https://css-tricks.com/snippets/css/media-queries-for-standard-devices/. Part of his resource has this:

/* ----------- iPhone 5 and 5S ----------- */

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

}

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

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

}

What's the difference between having a setting that's being prescribed for "Portrait and Landscape" as well as "Portrait" and "Landscape?" It seems like that "Portrait and Landscape" setting expects the user to be able to see the screen in two different resolutions at the same time, and I know that can't be right.

Can someone explain this to me?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
RobOwner (Aidellio)
Most Valuable Expert 2015

Commented:
No, it's just saying that regardless of the orientation, adopt these styles whether it is in either orientation.  Think if it like portrait OR landscape.
Bruce GustPHP Developer

Author

Commented:
Thanks, Rob!

So, by using "Portrait and Landscape," regardless of the way in which my users is using their device, the page itself will stay in the same position, correct? Or even if it does "shift," the dimension of the page wont' change...

I think I've seen that before, but I want to make sure I'm tracking with you.
Owner (Aidellio)
Most Valuable Expert 2015
Commented:
Yep. So regardless of how the user is viewing their device, those styles will be displayed. For instance, you may want the font size to be the same regardless or that certain content takes up  the same proportion of the page etc.
Bruce GustPHP Developer

Author

Commented:
Got it!

Thank you!

BTW: I've got another question, would love it if you could weigh in. I'm trying to get a project out the door and this is still alluding me: http://www.experts-exchange.com/questions/28920871/My-media-queries-are-not-working-and-I-can't-figure-out-why.html#a41434282

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial