Medienanfragen über mehrere Rahmen

Question

Hier undicht ist einige HTML:

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

Die test.html Seite enthält einige CSS aus einer externen Datei:

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

Und das Stylesheet hat:

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

Die oben ist vereinfacht, aber genug, um das Problem zu demonstrieren: Beide Seiten sind rot, trotz eines von ihnen c das Lernen ist breiter als das andere. Demonstration page

Was gibt?

(Anmerkung: Getestet in IE und Chrome - Chrome war in Ordnung, mit einem Rahmen rot und der andere weiß.)

Answer 1

Wie Sie in this answer lesen können, unterstützt Internet Explorer 9 CSS3-Medienabfragen, jedoch nicht innerhalb von Frames, wenn das CSS mit der Medienabfrage in einer externen Datei gespeichert ist. Daher sollten Sie Ihre Medienabfrage in den Kopf der -Seite einfügen. Frühere IE-Versionen unterstützen nativ keine Medienabfragen, aber Sie könnten eine Javascript-Bibliothek verwenden (siehe respond.js oder css3-mediaqueries-js), um dieses Problem zu beheben.

Answer 2

Sie können mit jquery mit dem folgenden Skript den Job:

<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>