@media only screen Vs. Iframe

@media only screen Vs. Iframe

So i have a bit of a predicamenyt. I have a link that displays in an
iframe if viewed on computer, and in parent page if on mobile device.
If viewed on the mobile device i only want users to see the page in
landscape. So, i have use the following code:
<style type="text/css">
#warning-message { display: none; }
@media only screen and (orientation:portrait){
#wrapper { display:none; }
#warning-message { display:block; }
}
@media only screen and (orientation:landscape){
#warning-message { display:none; }
}
</style>
....
<div id="wrapper">
<!-- page -->
</div>
<div id="warning-message">
please turn to landscape
</div>
However, the problem comes in because of the iframe. If viewed on a
computer the warning-message div is shown, not the wrapper content,
despite the fact that the computer screen is landscape. I think this is
because the iframe is portrait.
Does anyone know of a way to make it so that in non-mobile devices, only
the wrapper div content is displayed, not the warning message (ie
effectively treat all non-mobile devices as landscape)?
I hope the question makes sense.
Thanks in advance for any help.