Menu
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!
361
Setting the app upWhen on the main screen, under the orientation section, you will see a number of options like 'Auto-rotate OFF', 'Auto-rotate ON', 'Forced Portrait' and 'Forced Landscape'. As the names suggest, you can use these buttons as one-tap shortcuts to toggle the orientation of your device.
To adjust the screen rotation settings: Swipe down from the top of the screen to open the Quick settings panel. Look for the screen orientation icon. Depending on your settings, you may need to look for the Portrait, Landscape, or Auto Rotate icon.
Ensure that you have enabled Auto-rotate for your tablet. To do this, swipe down on the tablet to display the status bar and touch Auto Rotate. Some mobile versions of apps do not support Landscape mode, so they may not be displayable in Landscape mode on the tablet.
If the screen rotation is already on try turning it off and then on again. To check this setting, you can swipe down from the top of the display. If it's not there, try going to Settings > Display > Screen rotation.
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
50
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.
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
