我是这样使用的:
@media (max-height: 480px) and (min-width: 480px) and (max-width: 600px) {
html{
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transform-origin: left top;
-moz-transform-origin: left top;
-ms-transform-origin: left top;
-o-transform-origin: left top;
transform-origin: left top;
position: absolute;
top: 100%;
left: 0
}
但是当我旋转手机时，我看到白色显示。
最佳答案
您可以为此使用带有方向的媒体查询:
@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {
HTML {
变换:旋转(-90deg)；
变换原点:左上；
宽度:100vh；
溢出-x:隐藏；
position:absolute；
顶部:100%；
左:0；
}
}
这里的技巧是检测更改的方向并使用 CSS 变换来旋转网页内容以模拟方向锁定。
如果您对使用 Javascript 完成此操作的想法感到满意，那么您可以尝试以下操作:
screen.orientation.lock('landscape');
参见:
关于javascript - 手机网站如何锁定自动旋转？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49671841/