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?

Answer 1

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

Answer 2

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