css - 将 Chrome(移动版 -Android)锁定为纵向

Question

我在我的样式表中试过了。

   @viewport {
    orientation: portrait; 
  }

屏幕还在旋转。

我见过许多涉及 JQuery 的解决方案。由于文件重量限制，我正在寻找无 Jquery 的解决方案。而且我只关心 Android 上的 Chrome，而不是 iOS。

有什么解决办法吗？

---

更新: 我也试过了

    var lockOrientation = screen.lockOrientation || screen.mozLockOrientation || screen.msLockOrientation;

    lockOrientation("portrait-primary");

不起作用。

Answer 1

我设法用 CSS 解决了这个问题——尽管它并不理想——我还没有在许多设备上测试过它。希望这对想要在网络上锁定方向的人有所帮助。

@media (max-height: 480px) and (min-width: 480px) and (max-width: 600px) { 
html{
    -webkit-transform: rotate(-90deg);
       -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
         -o-transform: rotate(-90deg);
            transform: rotate(-90deg);
    -webkit-transform-origin: left top;
       -moz-transform-origin: left top;
        -ms-transform-origin: left top;
         -o-transform-origin: left top;
            transform-origin: left top;
    width: 320px; /*this is the iPhone screen width.*/
    position: absolute;
    top: 110%;
        left: 0
}
}