Media queries not working inside an iframe

P

5

39

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?

Panhellenism answered 1/12, 2014 at 11:17 Comment(1)

Set viewport in the parent windows. Solution is here: https://mcmap.net/q/409496/-iframe-and-media-query-issue – Bala 12/9, 2016 at 8:47

L

48

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

Luciferase answered 1/12, 2014 at 11:22 Comment(1)

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. – Wiles 24/8, 2015 at 14:9

S

20

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

Singlebreasted answered 30/5, 2017 at 13:3 Comment(2)

be aware though that to make it work on iOS, you need this: #23083962 – Singlebreasted 30/5, 2017 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! – Outroar 25/5, 2021 at 23:13

V

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

Vincennes answered 19/9, 2015 at 17:40 Comment(0)

S

0

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>

Satang answered 10/3, 2020 at 15:13 Comment(0)

I

0

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>

Interdepartmental answered 29/3, 2023 at 15:48 Comment(0)

Recommended topics

Hot tags