Currently facing a dilemma. I have a link that appears in an iframe when viewed on a computer, but displays on the parent page if accessed through a mobile device.
For mobile users, I want to restrict access to the page only in landscape mode. To achieve this, I've implemented 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, there's a challenge with the iframe element. When viewed on a computer, the warning-message box is visible instead of the wrapper content, even though the computer screen orientation is landscape. This may be due to the portrait orientation of the iframe.
Is there a solution to ensure that for non-mobile devices, only the content in the wrapper div is shown, without displaying the warning message (essentially treating all non-mobile devices as landscape)?
I hope my question is clear. Thanks in advance for any assistance.