如何在移动web应用程序(Android浏览器/iOS-Mobile Safari)上禁用横屏/图片切换

I am trying to disable phone rotation affecting the web page of one of my HTML5 mobile apps. No reorganizing of the layout, resizing, orientationchange behavior.

我正在尝试禁用影响我的一个HTML5移动应用程序网页的手机旋转。没有重新组织布局，调整大小，改变方向的行为。

I want it so that you rotate the phone and the initial layout loaded will stay the same, forcing the user into using the app in the original orientation. There are many subtleties to user logic and I truly feel this is needed in my app, so please no comments on that choice, rather help for my question in the first sentence.

我想让你旋转手机初始的布局保持不变，迫使用户在最初的方向上使用这个应用。用户的逻辑有很多微妙之处，我真的觉得这是我的应用程序需要的，所以请不要在这个选择上发表评论，在第一个句子中，我的问题就会得到帮助。

I tried listening for BOTH 'orientationchange' and 'resize' events and calling preventDefault and stopPropagation on them, to prevent any browser behavior of reorganizing the page to fit a landscape view when turned. Well, obviously preventing ANYTHING (ideally).

我尝试同时监听“orientationchange”和“resize”事件，并调用preventDefault和stopPropagation对它们进行调用，以防止浏览器在打开时重新组织页面以适应一个风景视图的行为。很明显，它可以防止任何事情发生(理想情况下)。
```
window.addEventListener("orientationchange", function (e) {
e.preventDefault();
e.stopPropagation();
}, false);

window.addEventListener("resize", function (e) {
e.preventDefault();
e.stopPropagation();
}, false);
```

Made absolutely no difference. Browser still reorganized the page on Android (both pre2.1 and after) and iPhone 4-5.

绝对没有区别。浏览器仍然重新组织了Android (pre2.1和after)和iPhone 4-5上的页面。

tried meta tags

试着元标记

<meta name="viewport" content="initial-scale=1.0, user-scalable=no />

then got pissed, tried

然后很生气,试过了

<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width" />

neither made a difference.

既不改变。

looked furiously on *, saw what I did in step 1. put out there several times...tried again to make sure I wasn't messing something up. Didn't work.

愤怒地看着*，看看我在第一步做了什么。在那里放几次……再试一次，确保我没有搞砸什么。没有工作。
sucked in my pride, then decided to keep running into a brick wall due to pride, then really sucked in my pride and posted here.

被我的骄傲吞没，然后决定继续跑进一堵砖墙，因为骄傲，然后真的被我的骄傲和张贴在这里。

HALP.

想买。

5 个解决方案

#1

I did it using the following work around, which asks user to switch back to Portrait mode.
Once the user switch back to Portrait mode, he will be allowed to interact with application.

我使用了下面的工作，它要求用户切换回竖屏模式。一旦用户切换回竖屏模式，他将被允许与应用程序交互。

<head>
<style type="text/css">
#landscape{
         position: absolute;
         top: 0px;
         left: 0px;
         background: #000000;
         width: 100%;
         height: 100%;
         display: none; 
         z-index: 20000;
         opacity: 0.9;
         margin:0 auto;
}
#landscape div{

        color: #FFFFFF;                                  
        opacity: 1;
        top: 50%;
        position: absolute;
        text-align: center;
        display: inline-block;
        width: 100%;
}
</style>
<script>          
      function doOnOrientationChange()
      {
        switch(window.orientation) 
        {  
          case -90:                 
                 document.getElementById("landscape").style.display="block";
                 break;
          case 90:              
                document.getElementById("landscape").style.display="block";                 
                break;
         default:                   
                document.getElementById("landscape").style.display="none";
                break;                            
        }
      }

      //Listen to orientation change
      window.addEventListener('orientationchange', doOnOrientationChange);  

    </script>
</head>
<body onload="doOnOrientationChange();">
<div id="landscape"><div>"Rotate Device to Portrait"</div></div>
</body>

#2

The obvious solution is to use javaScript for this:

显而易见的解决方案是使用javaScript:

if(window.innerHeight > window.innerWidth){
    document.getElementsByTagName("body")[0].style.transform = "rotate(90deg)";
}

When the screen rotates, rotate it right back.

当屏幕旋转时，把它转回来。

#3

You can't disable the mobile orientation in web app. What you can do is rotating the page to portrait (using css rotation from JS) when they change orientation to horizontal model. By this way they will be forced to use your web app in portrait mode.

你不能在web应用程序中禁用移动方向。你可以做的是，当页面转向水平模型时，将页面旋转为竖屏(使用来自JS的css旋转)。通过这种方式，他们将*在竖屏模式下使用您的web应用程序。

You can also show them a message ("portrait mode only" when they try to view in horizontal mode)

您还可以向他们显示一条消息(当他们尝试在水平模式下查看时，只显示“竖模式”)

#4

Keep it short and simple! :]

简明扼要!:]

window.addEventListener('orientationchange', function ()
{
    if (window.innerHeight > window.innerWidth)
    {
        document.getElementsByTagName('body')[0].style.transform = "rotate(90deg)";
    }
});

#5

-3

adding android:configChanges="keyboardHidden|orientation" to your AndroidManifest.xml. This tells the system what configuration changes you are going to handle yourself - in this case by doing nothing.

在android .xml中添加android:configChanges=“keyboardHidden|取向”。这将告诉系统您将自己处理哪些配置更改——在本例中，不做任何操作。

#1