CODEWITHSUNDEEP
htmlcssiframemedia-queries
Aniket
Aniket

Reputation: 5358

Media queries not working inside an iframe

I have in a webpage which is responsive. It makes use of media queries.

But the same page loaded in an iframe is not working.

For example, consider to my webpage, I have given background color as red when the screen-width is less than 640px.

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

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

So when I load that window in a new tab and make the browser width less than 640px, background color becomes red.

But the same window when loaded in an iframe of 320*480 dimensions does not have background color red.

How to make media queries work in an iframe?

Upvotes: 39

Views: 67119

Answers (5)

VierTretten
VierTretten

Reputation: 1

Check the iframe attributes: Make sure that the iframe is not blocking styles from being loaded. Check the sandbox and allow attributes to see if they are restricting styles from being loaded.

Your iframe could look like that:

<iframe src="https://example.com" sandbox="allow-forms allow-modals allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation-by-user-activation allow-downloads allow-presentation" scrolling="auto" >
</iframe>

Upvotes: 0

Aris Gatoudis
Aris Gatoudis

Reputation: 103

A similar issue i had, where media queries were not working as expected, was the empty src value on the iframe.

I had a sandboxed iframe to preview email templates inside another page. I used javascript injection to fill the iframe's html content after getting the html data with an ajax call to a service.

The solution for me was to create an empty html file, set this to the iframe src and then update the content with javascript.

Code on my page:

<iframe src="/myfolder/dummy.html"></iframe>

Code for the iframe src:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="description" content="corrects media queries fails of email template previews" />
  <title></title>
</head>

<body>

</body>

</html>

Upvotes: 0

Kiko
Kiko

Reputation: 858

Include the meta bellow into the HTML which loads your iframe and it should work, at least on android devices.

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

Upvotes: 21

James Harrington
James Harrington

Reputation: 3216

I ended up having to target the iframes width. (May not work in all situations)
But what i did was make the iframe 100% width and then it would resize with the window, so all i did was target the px of the iframe instead of the window

Upvotes: 8

NoobEditor
NoobEditor

Reputation: 15881

Try it this way, instead of device just target the width

Change 

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

to 

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

Also, it is more advised to target both min and max view-port width if you want to avoid considering order of media query declarations in your style-sheet

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

Upvotes: 48

Related Questions