I'm trying to figure out how to apply CSS based on whether one of two statements is true. For instance:
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
OR
and (max-device-width : 1024px)
and (orientation : portrait){
}
I am developing a multi-platform website and have already completed the mobile version. However, I want iPads to display the laptop/desktop version. Everything was going well with this approach:
@media only screen and (min-device-width: 0px){Mobile Version CSS}
@media only screen and (min-device-width: 500px){Other Version CSS}
But then I realized that when I changed a mobile device to landscape mode, it would switch back to the desktop mode because the width in the media query was less than the screen's landscape width. What would be the best combination of media queries that allow me to target mobile devices and other platforms separately, while taking into account whether a phone is in landscape or portrait mode? I don't want to repeat my CSS code across multiple queries due to changes in orientation. I simply want the mobile version to remain active regardless of whether the mobile device is in landscape or portrait mode.
Thank you!