前一段时间项目要实现横竖屏的效果，然后百度了下，大部分都是基于 window.orientation 去判断值去实现的。一开始我用着也没问题，然后就莫名其妙的失灵了，打印 window.orientation 一直获取不到，奇怪的很~~~
项目着急呀，然后就懵逼了，好好的怎么就不行了，当时那个郁闷（程序员确实苦逼，走个路一不小心就掉坑里）~~
后来在 MDN https://developer.mozilla.org/en-US/docs/Web/API/Window/orientation 里查了下，确实是已经丢弃的属性，在页面或web应用里使用它随时出现问题！！！
Deprecated
This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped. Do not use it in old or new projects. Pages or Web apps using it may break at any time.
js实现不了，但是css强大啊~~
纯css实现横竖屏
//竖屏代码
@media screen and (orientation: portrait){
}
//横屏代码
@media screen and (orientation: landscape){
}
这个基础的写法我们都知道，但是手机适配，就是个问题了。 so, 黑科技来了~~~
//竖屏代码
@media screen and (orientation: portrait){
.main{
width: 6.67rem; //横屏设计图的宽高
height: 3.75rem;
position: absolute;
left: 50%;
top: 50%;
bottom: auto;
right: auto;
-webkit-transform: translate3d(-50%,-50%,0) rotate(90deg);
transform: translate3d(-50%,-50%,0) rotate(90deg);
}
}
//横屏代码
@media screen and (orientation: landscape){
.main{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
}
