iPhone 5 Medienabfragen funktionieren nicht in Iframe

Ich habe eine Containerseite, die einen iframe lädt, der auf 99% Breite und Höhe eingestellt ist. Der Inhalt des Iframes reagiert auf Medienabfragen. Die Container-Seite reagiert auch auf Medienanfragen, aber ich denke nicht, dass das hier besonders wichtig ist.iPhone 5 Medienabfragen funktionieren nicht in Iframe

Dies funktioniert gut auf modernen Browsern und auf iPhone 6, aber es funktioniert nicht auf iPhone 5. Die 5 ignoriert die Medienabfragen vollständig.

Sie können dies mit Chrome iPhone 5 Emulator testen und das Problem ist sofort sichtbar. Mit dem folgenden Beispielcode sollte der Absatz die Rahmenfarbe # f00 haben, aber stattdessen #ccc bleiben. Ich habe auch auf einem echten iPhone 5 verifiziert und es entspricht der Chrome-Emulation.

Hinweis: Wenn Sie den Iframe-Inhalt auf einer separaten Seite laden, funktionieren die Medienabfragen problemlos auf dem iPhone 5 - das Problem tritt nur auf, wenn es in einen Iframe geladen wird.

Hat jemand einen Weg gefunden, das funktioniert? Benötige ich eine Art Javascript-Hack?

Container Source Code (container.htm):

<!DOCTYPE html> 
<html> 
    <head> 
    <title>test</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    </head> 
    <body> 
    <iframe src="iframeContent.htm" style="border: none; height: 99%; width: 99%; margin: 0px; padding: 0px;"></iframe> 
    </body> 
</html>

Iframe Source Code (iframeContent.htm):

<!DOCTYPE html> 
<html> 
    <head> 
    <title>test</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <style type="text/css"> 
     p { border: 1px solid #ccc; } 

     @media screen and (min-width: 310px) { 
     p { border: 1px solid #f00; } 
     } 

    @media screen and (min-width: 350px) { 
     p { border: 1px solid #00f; } 
    } 
    </style> 
    </head> 
    <body> 
    <p>here is a paragraph of content.</p> 
    </body> 
</html>

Quelle

2017-05-11 Mike Willis

Arg, hatte das Problem nichts mit dem zu tun, Medienabfragen werden nicht über iFrame oder mit iPhone 5 unterstützt.

Mit dem iframe bein g 99% width, und der standard-8px margin auf dem body-element, der inhalt innerhalb des iframe dachte, dass der bildschirm nur 301px breit war, was zu klein war, um von der 310px width media query abgedeckt zu werden, und es gab keine anderen regeln fing es auf.

Ich reparierte es, indem ich die Basismedienabfrage 200px.

@media screen and (min-width: 200px) { 
    p { border: 1px solid #f00; } 
    }

Quelle

2017-05-11 20:55:23

iPhone 5 Medienabfragen funktionieren nicht in Iframe

Antwort

Verwandte Themen