CODEWITHSUNDEEP
htmlcssipadmedia-queries
Denis
Denis

Reputation: 11

Media query max-width 992px not working on ipad landscape view

When I look on my iPad on landscape view, the CSS Media query max-width: 992px is not working and the responsive layout is still visible (but on desktop it breaks at 992px). Any help is appreciated.

<meta name="viewport" content="width=device-width" />

My CSS media queries:

.responsive_button{display:none;}

@media only screen and (max-width: 992px) {
   .responsive_button{display:block;}
}
@media only screen and (max-width: 768px) {}
@media only screen and (max-width: 480px) {}
@media only screen and (max-width: 320px) {}

Upvotes: 0

Views: 4996

Answers (2)

cch
cch

Reputation: 3386

iPad resolution is:

  • 768px by 1024px (Portrait)
  • 1024px by 768px (Landscape)

If you want to target ipad's different orientation use the below media queries mind that the orientation is specified as well.

iPad in Portrait

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { /* 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 */}

Upvotes: 1

abbott567
abbott567

Reputation: 862

An iPad's resolution is 768px by 1024px, this means in landscape mode, it is 1024px wide. The media query will not be active as 992px fits onto the 1024px wide screen.

As a general rule, iPads in landscape mode should just be treat as desktop screens.

Upvotes: 0

Related Questions