Медиа-запросы, протекающие по кадрам

Вот несколько HTML:

<iframe src="test.html" style="width: 200px; height: 100px;"></iframe>
<iframe src="test.html" style="width: 800px; height: 100px;"></iframe>

Страница test.html содержит некоторые CSS из внешнего файла:

<link rel="stylesheet" type="text/css" href="style.css" />

И таблица стилей имеет:

@media all and (max-width: 600px) {
  body {background-color: red;}
}

Вышеприведенное упрощено, но достаточно, чтобы продемонстрировать проблему: обе страницы красные, несмотря на то, что один из них явно шире другого. Страница демонстрации

Что дает?

(Примечание: протестировано в IE и Chrome - Chrome был в порядке, один красный и другой белый.)

Ответ 1

Как вы можете прочитать этот ответ, Internet Explorer 9 поддерживает мультимедийные запросы CSS3, но не внутри фреймов, когда CSS, содержащий медиа-запрос, находится во внешнем файле, поэтому вы должны поместить свой медиа-запрос в начало страницы test.html. Предыдущие версии IE не поддерживают медиа-запросы изначально, но вы можете использовать javascript-библиотеку (см. response.js или css3-mediaqueries-js), чтобы решить эту проблему.

Ответ 2

Вы можете выполнить задание, используя jquery со следующим script:

<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script>
    $(document).ready(function() {
        if ($(document).width() < 600) {
            $('body').css('background-color', 'red');
        };
    });
</script>