Mobile site - force landscape only / no auto-rotate
I have a site that has a mobile stylesheet:
<link rel="stylesheet" href="css/mobile.css" media="handheld">
I'm also using jQuery to check for mobile devices and alter functionality accordingly.
But I want to know if there is a way to force landscape-only orientation and disable auto-rotate? Either a CSS or a jQuery solution would be fine.
Thanks!
Solution 1:
Use media queries to test the orientation, in the portrait stylesheet hide everything and show a message that the app only works on landscape mode.
<link rel="stylesheet" type="text/css" href="css/style_l.css" media="screen and (orientation: landscape)">
<link rel="stylesheet" type="text/css" href="css/style_p.css" media="screen and (orientation: portrait)">
I think is best aproach
Solution 2:
You can't force orientation in web page, but you can suggest or block content in portarit mode.
I made a adaptation of a existing script
in your html file add a div element
<div id="block_land">Turn your device in landscape mode.</div>
Then adapt your css to cover all your page
#block_land{position:absolute; top:0; left:0; text-align:center; background:white; width:100%; height:100%; display:none;}
Then add a litle javascript to detect orientation
function testOrientation() {
document.getElementById('block_land').style.display = (screen.width>screen.height) ? 'none' : 'block';
}
Don't forget to test the orientation in the onload and onorientationchange, maybe in your body tag
<body onorientationchange="testOrientation();" onload="testOrientation();">
Let me know if this solution works for you.