Question

我正在建立一个网站，它在移动设备上运行良好，但只有当它处于横向方向时。在纵向视图中的含义一些元素变得扭曲。

有没有办法确保网站始终以横向模式定位？无论如何？

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

@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);
  }
}

有关为什么这样做不起作用的任何建议？

提前致谢！

Answer 1

评论中所述的更正完成了这项工作。以下是答案：

@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);
  }
}

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

1 个答案: