Mobile site - force landscape only / no auto-rotate

Asked 11/6, 2012 at 6:34 Answered 2/8, 2021 at 5:4

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!

Insult answered 11/6, 2012 at 6:34 Comment(0)

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

Tertia answered 3/10, 2012 at 16:49 Comment(0)

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.

Stampede answered 11/6, 2012 at 9:25 Comment(1)

So I tried a similar solution and the problem I ran into is several people had their orientation locked. So, it was really annoying for them to have to unlock. Ideally the page would just show up in landscape (like many game apps do). Going to look into using CSS rotation to solve it. – Homager 1/5, 2014 at 7:21

I think the best approach is the script so that when the user changes, it changes. I modified this so that it rotates your page main DIV when in portrait, forcing the user to switch. Unless they want to tilt their head sideways:

<script type="text/javascript">
    (function () {
        detectPortrait();
        $(window).resize(function() {
            detectPortrait("#mainView");
        });


        function detectPortrait(mainDiv) {
            if (screen.width < screen.height) {
                $(mainDiv).addClass("portrait_mode");
            }
            else {
                $(mainDiv).removeClass("portrait_mode");
            }
        }
    })();
</script>
<style type="text/css">
    .portrait_mode {
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
    }
</style>

Shoran answered 17/2, 2014 at 2:12 Comment(2)

This would definitely break any JS animation and the mobile responsiveness of the page. It will cause more problem to the developer and it can't be considered as a fix. – Ramentum 28/9, 2014 at 21:25

@WissamEl-Kik It still does what the OP wants. And really, what the OP asks for will also break the mobile responsiveness, so you can't blame this answer for doing that! It doesn't really need JavaScript though; triggering this with a orientation: portrait media query will also work. – Kenning 17/8, 2015 at 9:30

Simple way to force landscape orientation is set your min-max width in your css code, try using this code

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) { 
body {
-webkit-transform: rotate(90deg);
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
left: 0; 
}}

hope solve your problem.

Galling answered 24/12, 2014 at 17:14 Comment(0)

You can inform the user he has to change orientation and hide the screen. Then sense the orientation change and reload the page. The following code should be placed at the end of the template of your page or in the footer.

This is to inform the user he should rotate the device, it hides the content when the page is in portrait state. You should confirm that the ".content" is the right selector on your page.

if(screen.availHeight > screen.availWidth){
    jQuery( ".content" ).css( "display", "none" );
    var newLine = "\r\n"
    var msg = "Please use Landscape!"
    msg += newLine;
    msg += "(Turn your phone 90 degrees)";
    msg += newLine;
    msg += "and wait a seconds,";   
    msg += newLine;
    msg += "for the page to reload.";   
    alert(msg);
}

This will reload the hidden page when the user rotates the device.

jQuery(window).on("orientationchange",function(){
  location.reload();
});

Rasp answered 2/8, 2021 at 5:4 Comment(0)

-1

I tried the following code and it forced the browser to use the portrait mode:

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0" />

This code has been tested on an iPhone and on another mobile device.

Ramentum answered 29/9, 2014 at 8:10 Comment(1)

excuse me sir, i think the code only prevent user from zooming in or out. Tested on Safari in iphone 4S and Chrome in Android 4.3, both landscape and portrait mode are still possible. – Angulo 18/4, 2015 at 19:47

Recommended topics

Hot tags