1

Multiple min-width linked with 'and' on IE10 behaves not in the usual way I think the and operator should do: When window width is say 500px,

@media (min-width: 400px) and (min-width: 600px)  { not applying this }
@media (min-width: 600px) and (min-width: 400px)  { applything this! }

See jsfiddle

The question is: anyway to make both work on IE10? [edited here] which means 'not applying this' on both, in the way the and operator should behave. Chrome works in the expected way.

Suppose the code is already written as in the second line, everything is tested good except IE because of this issue. How to easily make IE not applying the second line, while not affecting other browsers?

Here is only some background not directly related to the issue: I need clumsy multiple min-width because I use SCSS mixin to make general small, medium and large layouts. 

@mixin respond($view) {
    if $view == m {
        @media (min-width: MMM) and (max-width: LLL)  { ... }
    }
}

On certain pages the medium layout splits into two layouts, so I need

@include respond(m) {
    @media (min-width: M2)  { ... }
}

which is compiled into multiple min-width.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Ksthawma
  • 1,257
  • 1
  • 16
  • 28
  • Multiple widths,and media queries usage are not for targeting a specific browser,it's used for targeting different screen sizes on different devices,if some one uses IE10, he/she suppose to use it on a computer screen,not on a mobile phone screen. – Hbirjand Aug 18 '14 at 05:21
  • 1
    I am not targeting a specific browser. – Ksthawma Aug 18 '14 at 05:23
  • Actually,as I've understood,you are trying to change the width of IE,to see how your code is working,this is not a real world practice. – Hbirjand Aug 18 '14 at 05:26
  • Here is two tutorial,that might help.http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/ – Hbirjand Aug 18 '14 at 05:27
  • And another http://mattstow.com/responsive-design-in-ie10-on-windows-phone-8.html – Hbirjand Aug 18 '14 at 05:27
  • No, I expect both `(min-width:400px) and (min-width:600px)` and `(min-width:600px) and (min-width:400px)` work as `(min-width:600px)`, as is on Chrome, but IE is proven not so. I am asking how to make multiple min-width work well on all browsers. – Ksthawma Aug 18 '14 at 05:30
  • try @-ms-viewport { width: device-width; } instead of @media (max-width: 400px) { @-ms-viewport { width: 320px; } } – Hbirjand Aug 18 '14 at 05:34
  • Not yet tried, but `@-ms-viewport` **is** targeting a specific browser, right? – Ksthawma Aug 18 '14 at 05:36
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/59484/discussion-between-hbirjand-and-ka-fai-lo). – Hbirjand Aug 18 '14 at 05:37
  • 2
    Wow, [this feels like IE6 all over again](http://stackoverflow.com/questions/3772290/css-selector-that-applies-to-elements-with-two-classes/3772305#3772305). Anyway, I was able to reproduce this issue on desktop IE11 on Win7, so it's not just IE10. – BoltClock Aug 18 '14 at 06:14

0 Answers0