发表新帖
发表新帖

Media queries fail inside IE9 iframe

前端 未结
关注
5 1581
小蘑菇
小蘑菇 2020-12-14 18:33

I have the following media queries in my CSS:

@media screen and (min-width: 0px) and (max-width: 319px) {
    body {background-color:red;}
}

@media screen a
相关标签:
5条回答
  • 被撕碎了的回忆
    2020-12-14 19:14

    Not a real answer but could help somebody else find a work around for this bug in IE.

    Page containing iframes

    <link href="style.css" rel="stylesheet">

    Iframe pages

    <link href="style.css?frameX" rel="stylesheet">

    The param frameX prevents IE from caching the css page and thus the iframe has responsive layout independently from the other pages. This is just a hack(horrible one) and to help somebody else find the answer to this problem.

    Sample files

    Index.html

    <!DOCTYPE html>
<html lang="en">
<head>
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="style.css" rel="stylesheet">
</head>
<body>
  <p></p>

  <hr>
  250px frame
  <iframe frameBorder="0" src="frame1.html" height="100" width="250" id='frame_1'></iframe>  

  <hr>
  350px frame
  <iframe frameBorder="0" src="frame2.html" height="100" width="350" id='frame_2'></iframe>  

  <hr>
  390px frame
  <iframe frameBorder="0" src="frame3.html" height="100" width="390" id='frame_3'></iframe>  

</div>
</body>

    frame1.html

    <!DOCTYPE html>
<html lang="en">
<head>
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="style.css?page=frame1" rel="stylesheet">
</head>
<body>
  <p></p>
</body>
</html>

    frame2.html

    <!DOCTYPE html>
<html lang="en">
<head>
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="style.css?page=frame2" rel="stylesheet">
</head>
<body>
  <p></p>
</body>
</html>

    frame3.html

    <!DOCTYPE html>
<html lang="en">
<head>
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="style.css?page=frame3" rel="stylesheet">
</head>
<body>
  <p></p>
</body>
</html>

    style.css

    iframe{display:block;}

@media (max-width: 8000px)
{
  body p:before {content: "bigger than 550px";}
}

@media (max-width: 550px)
{
  body p:before {content: "max550";}
}

@media (max-width: 450px)
{
  body p:before {content: "max450";}
}

@media (max-width: 350px)
{
  body p:before {content: "max350";}
}


@media (max-width: 250px)
{
  body p:before {content: "max250";}
}
    0 讨论(0)
  • 借酒劲吻你
    2020-12-14 19:18

    You most likely aren't going to be able to fix this. Media Queries are based on viewport size and I imagine IE isn't treating the iFrame as a fully fledged viewport in this context.

    Your best bet would most likely be to add a bit of JavaScript that detects the size and adds a class to the at the same thresholds you are using for your responsive design. This would also give you backwards compatibility with browsers that don't support media queries.

    0 讨论(0)
  • 孤独总比滥情好
    2020-12-14 19:19

    I had this problem with IE9. The parent page didn't have a doctype declared.
    Adding an html5 doctype (<!DOCTYPE html>) in the parent page solved the problem.

    0 讨论(0)
  • 广开言路
    2020-12-14 19:22

    Here's what I did:

    • using jQuery...
    • get all iframes on the page
    • onload of each iframe find all the stylesheet links
    • for each stylesheet grab the url and append a random num 'nocache' querystring to it
    • create a new stylesheet link tag and append it to the head
    • done.

    Here's the code:

    // This forces the media queries to run in IE iframes, by waiting for the iframes to load and then,
// re-getting/applying the stylesheet
(function($){
    // Get each of the iframes on this page
    $('iframe').each(function(index){
        // On load of each iframe:
        $(this).on('load', function(){
            var iframeDoc = $(this).contents();

            // For each stylesheet reference found:
            iframeDoc.find('link[rel="stylesheet"]').each(function(){
                // Get the current stylesheet's url and add a 'nocache' random num query string to it
                var cssURL = $(this).attr('href');
                cssURL += (cssURL.indexOf('?') != -1)? '&':'?';
                cssURL += 'nocache=' + (Math.random() + index);

                // Create a new stylesheet link tag and append it to the head
                $("<link/>", {
                    rel: "stylesheet",
                    type: "text/css",
                    href: cssURL
                }).appendTo(iframeDoc.find('head'));
            });

        });
    });
})(jQuery);
    0 讨论(0)
  • 忘掉有多难
    2020-12-14 19:26

    Had the same Probleme. However I found an easy fix. Using JS to create the iframes I just appended something like ?nocache=Math.random() to the iframe src. That fixed it for me :)

    0 讨论(0)
 看不清?
提交回复
热议问题