如何在手机/标签等中自动旋转网页游戏

Question

>我正在构建一个网页游戏。 现在，我想在手机访问时自动旋转手机屏幕。 任何建议。？ 我在下面尝试了这个 CSS，但这也不起作用

@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {
html {
transform: rotate(-90deg);
transform-origin: left top;
width: 100vh;
overflow-x: hidden;
position: absolute;
top: 100%;
left: 0;
}
}

请给我一个建议，通过该建议，屏幕在移动设备中打开时将自动旋转。

Answer 1

尝试

body{
margin:0;
overflow:hidden;
}
@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {
.wrapper{
transform: rotate(90deg);
transform-origin:bottom left;
position:absolute;
top:-100vw;
height:100vw;
width:100vh;
font-weight: 600;
}
}

<div class='wrapper'>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porta, orci id porttitor convallis, odio dolor hendrerit mi, nec vestibulum ipsum est et nulla. Nam elementum mi eget arcu scelerisque congue. Proin eros magna, condimentum sed interdum nec, tristique in turpis. Mauris vulputate
</p>
<hr />
<div>
<a href="google.com" target='_blank'>Google</a>
</div>
<p>Rotate 90 degree</p>
<hr />
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQjhOBG4ztvrvf0Jw6p_J3lMhnnKZ4TupbpIDVNy9OM38skvpi4" />
</div>