iFrame and media query issue

Question

I have an issue with the styles inside media queries for the content inside iFrame. I have an iFrame embedded in our site. We have styles for the contents inside iFrame. My iFrame width is 480px. I have a media query @media screen and (max-width: 480px) inside this I am adding styles to the content inside iFrame.

The problem is that, when opening the page in desktop browser of size 1900px width, (iFrame size is the same 480px), the styles inside media query of max-width: 480px is getting applied. But when I open the same page in iPad its not considering the iFrame width for a media query and taking screen width and applying 768px width media query styles.

As per my knowledge it has to take the iFrame width and iFrame width media query styles has to be rendered, since iFrame contains the entire html page. Please let me know how to fix the iPad issue.

Answer 1

The iframe width is also dependent on the viewport, so try setting something like this:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0;" />

Furthermore, if you want to target a particular device like an ipad, and you have content in an iframe you might consider using min-device-width to determine if your iframe is within a particular device.