Не может отображаться iframe правильно в IE8?

Question

У меня есть сайт здесь: Campus Tour, который я пытаюсь отобразить в iframe. Цель здесь - увидеть, что видит студент, когда студент просматривает тур на мобильном устройстве.

Вот iPhone видовой экран: iPhone Viewport

Он отображает должным образом в Chrome, но я не могу получить его для отображения в IE8. При просмотре в IE8 iframe отображает сайт в режиме полного сайта и не привязывается к мобильному CSS.

Вот мой IFrame код:

<div align="center" style="position: fixed; margin-top: 2%; margin-left: 12%; border: 5px solid #f60; width: auto; height: auto;"> 

       <h2 style="font-weight:bold; background-color: #f60; color: #fff;">iPhone 5 Display</h2> 
        <iframe style="width:568px; height: 320px; " src="http://webfro.gs/south/tour" frameborder="0"></iframe> 
      </div> 

Я Googled мое сердце и читать о режиме совместимости, и так далее, но не совсем уверен, как применять его. Я не уверен, что это правильное решение.

Дополнительная информация, необходимая для оказания помощи здесь?

Answer 1

Ваша проблема заключается в том, что IE8 не поддерживает запросы мультимедиа CSS, которые вы используете для изменения макета в соответствии с размером окна просмотра.

Если вам нужно поддерживать IE8 для этого, лучшим решением является использование сценария полифония, такого как Respond.js, который поддерживает поддержку синтаксиса медиа-запросов в IE8.