<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;
}
}
Vue移动端rotate强制横屏
于 2021-12-02 19:47:09 首次发布