Javascript 确保手机的方向始终是横向的，以便查看网站

我正在建立一个网站，它在手机上也能很好地工作，但只有当它处于横向时。在纵向视图中，某些元素被扭曲

有没有办法确保网站无论在什么情况下都始终以横向模式为导向

我从一个相关的答案中尝试了这一点：

@media only screen and (orientation:portrait){
  body {  
    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){
  body {  
     -webkit-transform: rotate(0deg);
     -moz-transform: rotate(0deg);
     -o-transform: rotate(0deg);
     -ms-transform: rotate(0deg);
     transform: rotate(0deg);
  }
}

有什么建议解释为什么这行不通吗

---

提前谢谢

评论中所述的更正起到了作用。答案如下:

@media only screen and (orientation:portrait){
  body {  
    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:portrait){
  body {  
    height: 100vw;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
  }
}

---

不需要第二条规则

方向：横向

不需要第二条规则

方向：横向