IE выполняет управляемый css медиа-запрос для небольшого устройства

Question

IE 6-7-8 (не знаю 9) выполняет этот css без соблюдения правила мультимедиа.

<link rel="stylesheet" type="text/css" media="only screen and (max-width: 680px), only screen and (max-device-width: 680px)" href="styles/small-device.css" />  

это нормально:

<link rel="stylesheet" type="text/css" media="only screen and (max-width: 680px)" href="styles/small-device.css" />

Почему?

В голове у меня это:

<meta name="viewport" content="width=device-width,initial-scale=1">

Answer 1

Это потому, что этот медиа-запрос является функцией CSS3, которая не полностью поддерживается IE и особенно IE6 (который вообще не поддерживается).

Вы должны попробовать условную загрузку ресурсов с помощью сниффинга браузера.Поскольку IE6,7,8 не используются в небольших устройствах, вы можете комбинировать оба.IE9 используется в WP7

<!--[if lte IE 8]>
<style type="text/css" media="screen"/>

<![endif]-->
<!--[if !(lte IE 8)]>
<style type="text/css" media="screen and (min-device-width: 450px)"/>

<![endif]-->

http://www.akademy.co.uk/blog/2010/03/css-style-ie6-media-hack/

Обновление: я предлагаю, чтобы было безопасно использовать CSS без немного экрана для всех IE, потому что они недоступны вустройства с маленьким экраном.

Если вы хотите использовать его для браузеров с измененным размером, хорошо, что невозможно в IE, если вы не используете jscript (динамические свойства) в своем CSS.например:

div {
  min-height: 300px;

  /* simulates min-height in IE6 */
  _height: expression(document.body.clientHeight < 300 ? "300px" : "auto");
}