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.