某个手机端页面需要显示报表 报表需要强制横屏展示(通过css样式媒体查询判断旋转布局)
代码如下
<div id="screen">
<div id="main">强制横屏
<div class="top"></div>
</div>
</div>
#screen {
position: fixed;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
background-color:rgb(228, 180, 180);
overflow: hidden
}
@media screen and (orientation: portrait) {
/*竖屏*/
#main {
position: absolute;
width: 100vh;
height: 100vw;
top: 0;
left: 100vw;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
transform-origin: 0% 0%;
border: 1px solid red;
background: yellow;
}
.top{
width: 100%;
height: 60px;
background: red;
}
}
@media screen and (orientation: landscape) {
/*手机开启横屏*/
#main {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
border: 1px solid red;
background:deepskyblue;
}
.top{
width: 100%;
height: 60px;
background: lightskyblue;
}
}