如何在移动Web应用程序上禁用切换横向/纵向（Android Browser / iOS-Mobile Safari）

Question

我试图禁用电话轮换，影响我的一个HTML5移动应用程序的网页。 没有重新组织布局，调整大小，方向更改行为。

我想要它，以便你旋转手机，加载的初始布局将保持不变，迫使用户以原始方向使用应用程序。 用户逻辑有许多微妙之处，我真的觉得这在我的应用程序中是必需的，所以请不要对这个选择做出评论，而是在第一句话中帮助解决我的问题。

我试着听两个'orientationchange'和'resize'事件，并在它们上面调用preventDefault和stopPropagation，以防止任何浏览器重新组织页面的行为在转动时适合横向视图。 好吧，显然防止任何事情（理想情况下）。
```
 window.addEventListener("orientationchange", function (e) { e.preventDefault(); e.stopPropagation(); }, false); window.addEventListener("resize", function (e) { e.preventDefault(); e.stopPropagation(); }, false); 
```

完全没有区别。 浏览器仍在Android（包括pre2.1和之后）和iPhone 4-5上重新组织页面。

尝试过meta标签

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

然后生气了，试过了

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

两者都没有区别。

在StackOverflow上疯狂地看了一下，看到我在第1步中做了几次。在那里多次出现......再次尝试确保我没有弄乱一些东西。 没工作。
我骄傲地吮吸着，然后因为骄傲而决定继续撞到一堵砖墙，然后真的被我的骄傲所吸引并贴在这里。

HALP。

Answer 1

我使用以下工作来完成它，它要求用户切换回纵向模式。
一旦用户切换回纵向模式，他将被允许与应用程序交互。

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

Answer 2

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

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

屏幕旋转时，向右旋转。

Answer 3

您无法在网络应用中停用移动设备。 当你将方向改为水平模型时，你可以做的是将页面旋转为肖像（使用JS的css旋转）。 通过这种方式，他们将被迫以纵向模式使用您的网络应用程序。

您还可以向他们显示一条消息（当他们尝试以水平模式查看时，仅“纵向模式”）

Answer 4

保持简短！ ：]

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

Answer 5

将android:configChanges="keyboardHidden|orientation"到AndroidManifest.xml中。 这告诉系统您将自己处理哪些配置更改 - 在这种情况下无需执行任何操作。

<activity android:name = "MyActivity" android:configChanges="keyboardHidden|orientation">

如何在移动Web应用程序上禁用切换横向/纵向（Android Browser / iOS-Mobile Safari）

问题描述

5 个解决方案

解决方案1
6 2013-09-11 09:20:48

解决方案2
6 2014-05-06 21:16:14

解决方案3
2 2012-05-28 14:29:59

解决方案4
1 2015-05-11 20:27:31

解决方案5
-4 2011-11-16 03:27:54

如何在移动Web应用程序上禁用切换横向/纵向（Android Browser / iOS-Mobile Safari）

问题描述

5 个解决方案

解决方案1 6 2013-09-11 09:20:48

解决方案2 6 2014-05-06 21:16:14

解决方案3 2 2012-05-28 14:29:59

解决方案4 1 2015-05-11 20:27:31

解决方案5 -4 2011-11-16 03:27:54

解决方案1
6 2013-09-11 09:20:48

解决方案2
6 2014-05-06 21:16:14

解决方案3
2 2012-05-28 14:29:59

解决方案4
1 2015-05-11 20:27:31

解决方案5
-4 2011-11-16 03:27:54