Reputation: 830
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 and (min-width: 320px) and (max-width: 480px) {
body {background-color:orange;}
}
@media screen and (min-width: 481px) and (max-width: 980px) {
body {background-color:yellow;}
}
@media screen and (min-width: 981px) and (max-width: 1200px) {
body {background-color:green;}
}
@media screen and (min-width: 1201px) {
body {background-color:blue;}
}
and five iframes at corresponding sizes:
<iframe frameBorder="0" src="index.html" height="320" width="255" ></iframe>
The queries kick-in fine in the standalone html file, but when viewed in an iframe context, they fail in IE9. All other browsers display OK.
Anyone know why? thanks
[edit] For the record, the parent and child html have the same docType, and the CSS is being served as text/css.
Upvotes: 18
Views: 16190
Reputation: 474
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.
Upvotes: 0
Reputation: 51
Here's what I did:
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);
Upvotes: 3
Reputation: 11
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 :)
Upvotes: 1
Reputation: 568
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";}
}
Upvotes: 22
Reputation: 4588
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.
Upvotes: 1