0

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) {}
cch
  • 3,067
  • 5
  • 29
  • 58
Denis
  • 11
  • 1
  • 4

2 Answers2

1

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 */}
cch
  • 3,067
  • 5
  • 29
  • 58
  • But using the **max-device-width** instead of **max-width** i don't think i will be able to test it in my desktop browser when i resize the window. Can i use your example in combination with my media querries ? – Denis Mar 22 '15 at 14:00
  • And how come bootstrap is not using the **max-device-width** and no one ever complained, cause my media querries are pretty similar. – Denis Mar 22 '15 at 14:04
  • Yes you can use these media queries in combination with yours. I thought the problem was with iPad. The above solution suggests where you should place your CSS code for iPad devices. – cch Mar 22 '15 at 14:06
  • Yes is related to iPad as i thought that my example media queries are applied to all devices/browsers. It means that every time i will design a new theme i will apply a separate media queries for iPads ? – Denis Mar 22 '15 at 14:10
  • It depends on what devices you are designing for. – cch Mar 22 '15 at 14:14
  • Since is a responive theme, no matter the device is, it should work,right? Same as using the bootstrap framework instead, but they are not using the **max-device-width** ..that's why is confusing to me. – Denis Mar 22 '15 at 14:20
  • Yes it should work, look this answer: http://stackoverflow.com/questions/6747242/what-is-the-difference-between-max-device-width-and-max-width-for-mobile-web – cch Mar 22 '15 at 14:20
  • Hi @Denis if this or any answer has solved your question please consider [accepting it](http://meta.stackexchange.com/q/5234/179419) by clicking the check-mark. This indicates to the wider community that you've found a solution and gives some reputation to both the answerer and yourself. There is no obligation to do this. – cch Mar 24 '15 at 04:33
0

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.

abbott567
  • 852
  • 6
  • 17
  • I don't think i understand or i didn't explained my self enough..If the 992px fits onto the 1024px ,than why i still see the responsive layout? Cause it supposed to be visible at max 992px. – Denis Mar 22 '15 at 13:51