Question

尝试将我的WebApp HTML锁定为HTML5视频的横向模式。已经找到了一个很好的解决方案，但它将屏幕旋转到-90deg但我需要+ 90deg ...... 当我将-90更改为90时，视频播放器会从屏幕上消失。我认为transform-origin或top或left是错误的。这里是CSS：

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

有什么想法吗？

Answer 1

尝试添加overflow-x:hidden ...因为您已经@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: portrait) { html { transform: rotate(90deg); transform-origin: left top; width: 100vh; overflow-x: hidden; position: absolute; /*top: 100%;*/ left: 50px; } }，因为加上轮播，您无法看到它已被转移到左侧。

＆＃13;

<html>
<head>
</head>
<body>
 <h1>Hello World</h1>
</body>
</html>

＆＃13;

{{1}}

＆＃13;

检查提到的屏幕宽度（320px到767px）..

CSS屏幕方向WebApp轮换

1 个答案: