I have a particular need where I must cater for IE9. So in my main document in the head section I have:
<!--[if IE 9]>
<link rel="stylesheet" href="css/IE9pc.css" media="screen and (min-width: 1348px)"/>
<link rel="stylesheet" href="css/IE9tablet.css" media="screen and (min-width: 767px) and (max-width: 1347px)" />
<link rel="stylesheet" href="css/IE9mobile.css" media="screen and (max-width: 767px)" />
<![endif]-->
This works fine if the window is already at the sizes specified, but If I reduce or expand the screen size, then the appropriate stylesheet for the new screen size doesn't kick in. How can I get the correct stylesheet to be picked up dynamically?
Update
I See Rory has marked this as duplicate, but it's not. In my case as per Rory's direction, compatibility view isn't set this is testing against a 'true' I.E.9. browser. An answer offered by the Rory's link suggested <meta http-equiv="X-UA-Compatible" content="IE=9">
but because I'm catering for newer browsers as well I have <meta http-equiv="X-UA-Compatible" content="IE=edge">
in my header and I don't believe I can change this easily in code.