Обнаружение портретного ландшафта CSS
@media screen and (orientation:portrait) { … }
@media screen and (orientation:landscape) { … }
wvn
@media screen and (orientation:portrait) { … }
@media screen and (orientation:landscape) { … }@media screen and (min-width: 0px) and (max-width: 1204px) and (orientation: landscape) {
html {
transform: rotate(-90deg);
transform-origin: left top;
width: 100vh;
overflow-x: hidden;
position: absolute;
top: 100%;
left: 0;
}
}/* For portrait, we want the tool bar on top */
@media screen and (orientation: portrait) {
#toolbar {
width: 100%;
}
}
/* For landscape, we want the tool bar stick on the left */
@media screen and (orientation: landscape) {
#toolbar {
position: fixed;
width: 2.65em;
height: 100%;
}
p {
margin-left: 2em;
}
li + li {
margin-top: .5em;
}
}
@media (orientation: portrait) {
body {
flex-direction: column;
}
}@media (orientation: landscape) and (hover: none) and (pointer: coarse) {
/* your CSS to target only landscape mobile users */
}