Como detectar a orientação do dispositivo usando consultas de mídia CSS?

No JavaScript, o modo de orientação pode ser detectado usando:

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

No entanto, existe uma maneira de detectar a orientação usando apenas CSS?

Por exemplo. algo como:

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

CSS para detectar a orientação da tela:

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

A definição CSS de uma consulta de mídia está em http://www.w3.org/TR/css3-mediaqueries/#orientation

@media all and (orientation:portrait) {
/* Style adjustments for portrait mode goes here */
}

@media all and (orientation:landscape) {
  /* Style adjustments for landscape mode goes here */
}

mas ainda parece que você precisa experimentar

Acho que precisamos escrever uma consulta de mídia mais específica. Certifique-se de que se você escrever uma consulta de mídia, isso não afetará outra visualização (Mob, Tab, Desk), caso contrário, poderá haver problemas. Gostaria de sugerir que você escreva uma consulta de mídia básica para o respectivo dispositivo, que abrange tanto a consulta quanto a consulta de mídia de orientação, que você pode codificar mais sobre orientação de exibição por boas práticas. Não precisamos escrever as duas consultas de orientação à mídia ao mesmo tempo. Você pode consultar o meu exemplo abaixo. Sinto muito se minha escrita em inglês não é muito boa. Ex:

Para dispositivos móveis

@media screen and (max-width:767px) {

..This is basic media query for respective device.In to this media query  CSS code cover the both view landscape and portrait view.

}


@media screen and (min-width:320px) and (max-width:767px) and (orientation:landscape) {


..This orientation media query. In to this orientation media query you can specify more about CSS code for landscape view.

}

Para Tablet

@media screen and (max-width:1024px){
..This is basic media query for respective device.In to this media query  CSS code cover the both view landscape and portrait view.
}
@media screen and (min-width:768px) and (max-width:1024px) and (orientation:landscape){

..This orientation media query. In to this orientation media query you can specify more about CSS code for landscape view.

}

Área de Trabalho

faça conforme sua exigência de projeto desfrutar ... (:

Obrigado, Jitu

Eu iria para a proporção, oferece muito mais possibilidades.

/* Exact aspect ratio */
@media (aspect-ratio: 2/1) {
    ...
}

/* Minimum aspect ratio */
@media (min-aspect-ratio: 16/9) {
    ...
}

/* Maximum aspect ratio */
@media (max-aspect-ratio: 8/5) {
    ...
}

Tanto a orientação quanto a proporção dependem do tamanho real da viewport e não têm nada a ver com a própria orientação do dispositivo.

Leia mais: https://dev.to/ananyaneogi/useful-css-media-query-features-o7f

Em Javascript é melhor usar screen.widthe screen.height. Esses dois valores estão disponíveis em todos os navegadores modernos. Eles fornecem as dimensões reais da tela, mesmo que o navegador tenha sido reduzido quando o aplicativo é iniciado. window.innerWidthmuda quando o navegador é reduzido, o que não pode acontecer em dispositivos móveis, mas em PCs e laptops.

Os valores screen.widthe screen.heightmudam quando o dispositivo móvel alterna entre os modos retrato e paisagem, portanto, é possível determinar o modo comparando os valores. Se screen.widthfor maior que 1280px, você está lidando com um PC ou laptop.

Você pode construir um ouvinte de evento em Javascript para detectar quando os dois valores são invertidos. Os valores de largura de tela de retrato para se concentrar são 320px (principalmente iPhones), 360px (a maioria dos outros telefones), 768px (tablets pequenos) e 800px (tablets comuns).