如何在移动Web应用程序中将方向锁定为纵向模式？

Question

我正在使用html创建一个Web应用程序，并为移动设备（手机）创建javascript。如何以纵向锁定屏幕方向？是否有任何扩展或框架可以做到这一点？

编辑： 当用户进入横向模式时，我想要只显示包含文本的＃div（如果重要的是盒子的形状）;请将您的设备变为肖像。＆＃34;

Answer 1

您可以使用类似以下CSS媒体查询的内容：

@media screen and (orientation: landscape) {
   .main-content { display: none; }
   .use-portrait { display: block; }
}

当设备处于横向模式时，会隐藏您的main-content并显示use-portrait div。您可以使用一些额外的CSS来旋转use-portrait div以进一步诱使用户执行此操作：

.use-portrait {
  -webkit-transform: rotate(90deg);    
  transform: rotate(90deg);  
}

您可能需要将其翻译为正确显示。