browser - How to detect the device orientation using CSS media queries?

Question

posted Oct 17, 2021 in Technique[技术] by 深蓝 (71.8m points)

In JavaScript the orientation mode can be detected using:

if (window.innerHeight > window.innerWidth) {
    portrait = true;
} else {
    portrait = false;
}

However, is there a way to detect the orientation using CSS only?

Eg. something like:

@media only screen and (width > height) { ... }

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-17T00:11:55+0000

CSS to detect screen orientation:

 @media screen and (orientation:portrait) { … }
 @media screen and (orientation:landscape) { … }