How to set portrait and landscape media queries in css?

Question

Here is my media query:

@media screen and (min-device-width: 768px) and (max-device-width: 1824px) and (orientation : portrait){
  .hidden-desktop {
    display: inherit !important;
  }
  .visible-desktop {
    display: none !important ;
  }
  .visible-tablet {
    display: inherit !important;
  }
  .hidden-tablet {
    display: none !important;
  }
}

@media screen and (min-device-width: 768px) and (max-device-width: 1824px) and (orientation : landscape){
  .hidden-desktop {
    display: inherit !important;
  }
  .visible-desktop {
    display: none !important ;
  }
  .visible-tablet {
    display: inherit !important;
  }
  .hidden-tablet {
    display: none !important;
  }
}
@media screen and (max-device-width: 767px) and (orientation: portrait) {
  .hidden-desktop {
    display: inherit !important;
  }
  .visible-desktop {
    display: none !important;
  }
  .visible-phone {
    display: inherit !important;
  }
  .hidden-phone {
    display: none !important;
  }
}
@media screen and (max-device-width: 767px) and (orientation: landscape) {
  .hidden-desktop {
    display: inherit !important;
  }
  .visible-desktop {
    display: none !important;
  }
  .visible-phone {
    display: inherit !important;
  }
  .hidden-phone {
    display: none !important;
  }
}

But in tablet, If it is in landscape mode, this div is showing

 .visible-tablet {
    display: inherit !important;
  }

If it is in portrait mode, this div is showing

.visible-phone {
    display: inherit !important;
  }

I want this div .visible-tablet to be showing always whenever I switch my tablet to auto-rotate mode(which will be for portrait and landscape)

But I used portrait and landscape conditions, but still I am facing this issue. Any comments?

quemeful · Answer 1 · 2021-08-04T18:09:34.463

47

It can be as simple as this.

@media (orientation: landscape) {

}

edited Aug 04 '21 at 18:09

answered Dec 13 '17 at 12:47

quemeful

9,542
4
60
69

8

Just remember, this will apply to all things with an aspect ratio that is wider than it is tall, aka most modern screens. If you are cool with that then this media query is perfect. Found this codepen which demonstrates this: https://codepen.io/CrisMVP3200/pen/BmBaZy – srussking Jun 08 '18 at 18:34
5

@srussking What other behavior would you expect? – korona Nov 19 '18 at 12:50
4

@korona just wanted to be clear that this will effect a laptop screen as well as a phone/tablet. Personally I tend to think of landscape and portrait in a mobile-y way but this is really just anything that is wider than tall... – srussking Nov 20 '18 at 20:24
Strangely, this also applies to devices with equal height and width (a.k.a. square screens). – KHAYRI R.R. WOULFE Aug 04 '21 at 15:33

score 41 · Answer 2 · answered Nov 11 '14 at 09:11

iPad Media Queries (All generations - including iPad mini)

Thanks to Apple's work in creating a consistent experience for users, and easy time for developers, all 5 different iPads (iPads 1-5 and iPad mini) can be targeted with just one CSS media query. The next few lines of code should work perfect for a responsive design.

iPad in portrait & landscape

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  { /* STYLES GO HERE */}

iPad in landscape

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { /* STYLES GO HERE */}

iPad in portrait

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { /* STYLES GO HERE */ }

iPad 3 & 4 Media Queries

If you're looking to target only 3rd and 4th generation Retina iPads (or tablets with similar resolution) to add @2x graphics, or other features for the tablet's Retina display, use the following media queries.

Retina iPad in portrait & landscape

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */}

Retina iPad in landscape

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */}

Retina iPad in portrait

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */ }

iPad 1 & 2 Media Queries

If you're looking to supply different graphics or choose different typography for the lower resolution iPad display, the media queries below will work like a charm in your responsive design!

iPad 1 & 2 in portrait & landscape

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (-webkit-min-device-pixel-ratio: 1){ /* STYLES GO HERE */}

iPad 1 & 2 in landscape

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1)  { /* STYLES GO HERE */}

iPad 1 & 2 in portrait

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) 
and (-webkit-min-device-pixel-ratio: 1) { /* STYLES GO HERE */ }

Source: http://stephen.io/mediaqueries/

You can use ... http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ — KiV, Nov 11 '14 at 09:52
Both `min-device-width` and `max-device-width` [are deprecated](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries). — lowtechsun, Apr 26 '17 at 11:24
max-device-width and min-device-width are not working when checked on device — monisha, May 04 '17 at 05:35
the question wasn't asking for media queries for ipad. it specifically says portrait and landscape which includes many more devices than ipads. — jpro, Nov 01 '17 at 20:55
Apple users only see Apple devices in the World. This should be pretty obvious by now. According to them, no other device should exist in the World. — Spock, Nov 29 '17 at 17:36

How to set portrait and landscape media queries in css?

2 Answers2

Linked