Medienabfragen funktionieren nicht in einem iframe

Question

Ich habe in einer Webseite, die reagiert. Es nutzt Medienabfragen.

Aber die gleiche Seite in einem Iframe geladen funktioniert nicht.

Betrachten Sie zum Beispiel meine Webseite, habe ich Hintergrundfarbe als rot angegeben, wenn die Bildschirmbreite weniger als 640px ist.

@media only screen and (max-device-width : 640px) { 

    .header-text { 
     background-color: red; 
    } 
} 

Also, wenn ich das Fenster in einem neuen Tab laden und der Browser machen Breite von weniger als 640px, wird die Hintergrundfarbe rot.

Aber das gleiche Fenster, wenn es in einem Iframe von 320 * 480 Dimensionen geladen wird, hat keine Hintergrundfarbe rot.

In kurzen Medienabfragen funktionieren nicht in einem Iframe.

Pls Hilfe.

Answer 1

es auf diese Weise versuchen, statt device Ziel nur die width

ändern

@media only screen and (max-device-width : 640px) { 

zu

@media only screen and (max-width : 640px) { 

Auch es sowohl min Ziel wird empfohlen und max View-Port-Breite, wenn Sie vermeiden möchten, zu prüfen g Reihenfolge der Medienabfragedeklarationen in Ihrem Stylesheet

@media screen and (min-width: 320px) and (max-width: 640px) { 
    .header-text { 
     background-color: blue; 
    } 
} 

Answer 2

Ich musste die iframes-Breite anvisieren. (Kann nicht in allen Situationen funktionieren)
Aber was ich tat, war die iframe 100% Breite machen und dann wäre es mit der Fenstergröße ändern, so alles, was ich tat, war Ziel der Pixel des iframe statt das Fenster

Answer 3

einbeziehen Der Meta-Balg in den HTML-Code, der Ihren iframe lädt, und es sollte funktionieren, zumindest auf Android-Geräten.

<meta name="viewport" content="width=device-width, initial-scale=1">