0

I am trying to set media queries for the iphone 5 and different ones for the iphone 6. However for some reason it looks like my queries are overlaping:

Iphone 6

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

Iphone 5

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

For some reason, whatever I declare on the media query for the iPhone 5 is also showing on the iPhone 6. Do the queries overlap? I thought that both conditions had to be met.

I am using the latest iphones simulators from xcode.

1 Answers1

1

I am not sure why exactly the queries are overlapping, but you could try to use device-aspect-ratio media queries instead, as proposed on this question:

iPhone5: @media screen and (device-aspect-ratio: 40/71) {}

iPhone6: @media screen and (device-aspect-ratio: 667/375) {}

After doing some research I can actually also answer your original question. Yes, media queries need to meet all conditions to match. But as you are using both devices in portrait mode, the iPhone6 has a device-width of 375px while the iPhone5 has one of 320px. A device width of 375px however, is between 320px and 568px and thus also matches the rules for the iPhone5. If the rules are overwriting each other it could work, if you just switch the order of the media-queries as the iPhone6 rules will not show on the iPhone5, but if you want a definitive distinction between the two phones you should just use device-aspect-ratio.

Community
  • 1
  • 1
irruputuncu
  • 1,460
  • 1
  • 11
  • 24
  • But if all conditions must meet, the maximum device width of the iphone 5 doens't meet the iphone6. So it shouldn't show in the iphone 6. –  Dec 18 '14 at 19:14
  • Unless the max-device-width only applies when in landscape mode. –  Dec 18 '14 at 19:15
  • No, `max-device-width` is not a property of the device but instead will match all devices that have a (current, e.g. depending on the orientation) device-width which is lower than the specified value. – irruputuncu Dec 18 '14 at 19:16
  • Got it. So the do overlap. Thanks. –  Dec 18 '14 at 19:20