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!

回答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

回答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.

回答3:

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>

回答4:

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.

回答5:

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.

来源：https://stackoverflow.com/questions/10975387/mobile-site-force-landscape-only-no-auto-rotate

标签

jquery

css

mobile

landscape

autorotate