Mobile site - force landscape only / no auto-rotate

后端未结

关注

 5  2170

梦如初夏

I have a site that has a mobile stylesheet:

I\'m also using jQue

相关标签:

5条回答

陌清茗

2020-11-27 17:04

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.

0 讨论(0)

走了就别回头了

2020-11-27 17:05
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
0 讨论(0)
发布评论:

提交评论
- 加载中...
忘掉有多难

2020-11-27 17:18
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...

夕颜

2020-11-27 17:22

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>

0 讨论(0)

盖世英雄少女心

2020-11-27 17:29
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...