Viewport для настольных компьютеров IE10 и 11, но не для мобильных устройств

Я создаю много адаптивных сайтов. Я хотел бы поддерживать режимы привязки IE10 и IE11, но я не могу сделать это полностью, не нарушив поддержку Windows Phone 8. Это код, который я сейчас использую в своем CSS:

@media screen and (max-width:400px) {
    @-ms-viewport{
        width: device-width;
    }
}

Это работает нормально, но если IE10/11 не привязан к минимально возможному положению, сайт отображается как уменьшенный. Если я избавлюсь от медиа-запроса, он будет правильно отображаться в IE10/11 на настольных компьютерах и планшетах, но будет отображаться как сайт рабочего стола в IE10 mobile на Windows Phone 8. Есть ли способ обойти это, или я застрял только наполовину? Режимы привязки IE10/11?

Скриншоты:

С Media Query, Windows 8:

С Media Query Windows Phone 8:

Без Media Query Windows 8:

Без Media Query, Windows Phone 8:


css internet-explorer-11 internet-explorer-10 windows-8 windows-phone-8
person JacobTheDev    schedule 29.10.2013    source источник
comment
Это та же проблема, что описана в документации Bootstrap? Если это так, getbootstrap.com/getting-started/#browsers содержит исправление JS.   -  person Olly Hodgson    schedule 29.10.2013
comment
Да спасибо! Пожалуйста, опубликуйте как ответ, чтобы я мог принять его. Я бы предпочел исправление CSS, но это придется сделать.   -  person JacobTheDev    schedule 29.10.2013

Ответы (1)


arrow_upward
12
arrow_downward

Это та же проблема, что описана в документации Bootstrap? Если да, getbootstrap.com/docs/3.3/getting-started/# support-ie10-width имеет исправление JS. С сайта:

Windows Phone 8 и Internet Explorer 10

Internet Explorer 10 не отличает ширину устройства от ширины области просмотра и, следовательно, неправильно применяет медиа-запросы в CSS Bootstrap. Чтобы решить эту проблему, вы можете дополнительно включить следующие CSS и JavaScript, чтобы обойти эту проблему, пока Microsoft не выпустит исправление.

@-webkit-viewport   { width: device-width; }
@-moz-viewport      { width: device-width; }
@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }

if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
  var msViewportStyle = document.createElement("style")
  msViewportStyle.appendChild(
    document.createTextNode(
      "@-ms-viewport{width:auto!important}"
    )
  )
  document.getElementsByTagName("head")[0].appendChild(msViewportStyle)
}

Для получения дополнительной информации и рекомендаций по использованию прочитайте Windows Phone 8 и устройство- Ширина.

person Olly Hodgson    schedule 29.10.2013