React强制横屏
秃尾巴的猫 1/18/2021 React
.landscape-container {
position: absolute;
overflow: hidden;
}
// 竖屏
@media screen and (orientation: portrait) {
.landscape-container {
width: 100vh;
height: 100vw;
top: calc((100vh - 100vw) / 2);
left: calc((100vw - 100vh) / 2);
transform: rotate(90deg);
transform-origin: 50% 50%;
}
}
// 横屏
@media screen and (orientation: landscape) {
.landscape-container {
width: 100vw;
height: 100vh;
top: 0;
left: 0;
transform: none;
transform-origin: 50% 50%;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29