如何强制移动网页加载景观

我们的网站上有一个移动网页，加载后需要在浏览器中的景观中呈现。另外，该页面需要锁定在景观中，以使设备无法更改方向。

主要移动浏览器或CSS属性中是否有JS API？

您可以尝试使用此代码：

#container { display:block; }
@media only screen and (orientation:portrait){
  #container {
    height: 100vw;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
  }
}
@media only screen and (orientation:landscape){
  #container {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

您还应该将其添加到身体标签中：

 <body id="container">

我在这里找到了这个解决方案。同一博客还提供了其他建议，但我没有尝试，因为上面的博客效果很好。

相关内容

最新更新

热门标签：