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.

Mobile site - force landscape only / no auto-rotate

Solution 1:

Solution 2:

Related

Recent Posts