Media queries not working inside an iframe

Question

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?

Set viewport in the parent windows. Solution is here: http://stackoverflow.com/a/20838525/5016546 — Center Developments, Sep 12 '16 at 08:47

NoobEditor · Accepted Answer · 2014-12-01T11:34:55.067

40

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;
    }
}

edited Dec 01 '14 at 11:34

answered Dec 01 '14 at 11:22

NoobEditor

14,879
17
75
106

10

That's works for me with "max-device-width" but not with "max-width". With "max-width" it's the size of the iframe that counts. – user2267379 Aug 24 '15 at 14:09

Kiko · Answer 2 · 2017-05-30T16:32:23.043

15

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">

edited May 30 '17 at 16:32

answered May 30 '17 at 13:03

Kiko

778
7
13

1

be aware though that to make it work on iOS, you need this: https://stackoverflow.com/questions/23083462/how-to-get-an-iframe-to-be-responsive-in-ios-safari – Kiko May 30 '17 at 16:48
Yeah, that problem occurred to me when I didn't put this in the head of the page that hosted the problematic iframe. Thanks for the tip! – Iulian Pinzaru May 25 '21 at 23:13

score 8 · Answer 3 · answered Sep 19 '15 at 17:40

8

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

answered Sep 19 '15 at 17:40

James Harrington

3,070
28
31

score 0 · Answer 4 · answered Mar 10 '20 at 15:13

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>

Media queries not working inside an iframe

4 Answers4

Linked