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

保持简短！：

＆＃13;

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

＆＃13;

Answer 5

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

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

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

5 个答案: