如何强制移动网页横向加载

问题描述 投票：0回答：1

我们的网站上有一个移动网页，加载时需要始终在浏览器中横向呈现。此外，页面需要横向锁定，以便设备无法更改方向。

主要移动浏览器中是否有任何 JS API 或 CSS 属性可以实现此目的？

javascript css mobile viewport
1个回答
3
投票

您可以尝试使用此代码：

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

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.