Why does a media query, including an orientation property, work in an iframe?

Question

I have a problem with media query in iframe. I realized that my media queries seem to work until I specify the orientation. This multimedia query works just fine:

@media screen and (-webkit-min-device-pixel-ratio: 1) and (max-device-width: 1024px), screen and ( min--moz-device-pixel-ratio: 1) and (max-device-width: 1024px), screen and ( -o-min-device-pixel-ratio: 1/1) and (max-device-width: 1024px), screen and ( min-device-pixel-ratio: 1) and (max-device-width: 1024px) { /*Styles here*/ } 

But when I add an orientation property, it no longer works (neither orientation: portrait, nor orientation: landscape):

 @media screen and (-webkit-min-device-pixel-ratio: 1) and (max-device-width: 1024px) and (orientation: portrait), screen and ( min--moz-device-pixel-ratio: 1) and (max-device-width: 1024px) and (orientation: portrait), screen and ( -o-min-device-pixel-ratio: 1/1) and (max-device-width: 1024px) and (orientation: portrait), screen and ( min-device-pixel-ratio: 1) and (max-device-width: 1024px) and (orientation: portrait) { /*Styles here*/ } 

Such media queries work very well in my main CSS, but this problem only appears in the CSS file used in the iframe. Anyone with ideas on how to solve this? Is it impossible to determine the orientation from iframe CSS? I would really come to terms with this!

It seems that there are other people having the same problem, but I could not find a solution to the problem.

Edit: To clarify some of the ambiguities, I tested the website on several mobile devices, but mostly these are the tablets I'm trying to target.

Answer 1

Maybe this is a bad solution, but at least it works, and since I got control over the main page and the page displayed in the iframe, I don’t see that there should be any direct danger, Anyway, this is my solution :

I had the idea that the problem could be solved using javascript instead of CSS. But I still could not get the correct orientation even with javascript, so I assume that the problem actually stems from the fact that the page inside the iframe does not know anything about its parent environment. However, I found that you can call methods from the javascript main page if the methods are in a file called parent.js. This allows you to create a method that checks the orientation of the main page and calls it from a javascript iframe. This solution, of course, applies to any other similar problem. However, this requires that you gain access to both the code for the main page and the page loaded in the iframe.

Edit: As mentioned in the comments on muzzamo, this solution requires the code for the main page and the code for the iframe to be in the same domain. Sorry for the ambiguity! -From editing -

Code from parent.js:

 function getDeviceOrientation() { var devOri = window.orientation; return devOri; } 

Code from iframe.js:

 function changeFontSize() { var parentOrientation = parent.getDeviceOrientation(); //do stuff dependent on value of parentOrientation or whatever } 

As already mentioned: I'm not sure if this is a GOOD solution, but in apartments this is a solution. Since I'm new to javascript, I will still be grateful for comments on my solution and / or other (better) solutions to the problem. But I hope this helps others with similar problems!

PS. Remember to also include the parent.js file in the head of the HTML file!

 <script type="text/javascript" src="js/parent.js"></script>