Link to home
Create AccountLog in
Avatar of Bruce Gust
Bruce GustFlag for United States of America

asked on

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

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?
Avatar of Rob
Rob
Flag of Australia image

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.
Avatar of Bruce Gust

ASKER

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.
ASKER CERTIFIED SOLUTION
Avatar of Rob
Rob
Flag of Australia image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
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: https://www.experts-exchange.com/questions/28920871/My-media-queries-are-not-working-and-I-can't-figure-out-why.html?anchorAnswerId=41434282#a41434282