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