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


159

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) { ... }

Respostas:


435

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


66
Nota: Este valor não corresponde à orientação real do dispositivo. Abrir o teclado virtual na maioria dos dispositivos na orientação retrato fará com que a janela de visualização fique mais larga do que alta, fazendo com que o navegador use estilos de paisagem em vez de retrato.
9788 Johann Combrink # 03:

9
@JohannCombrink Muito importante que você tenha mencionado isso. Abrir o teclado irá atrapalhar o design. Bom, você aponta isso.
lowtechsun

Referência para @ de JohannCombrink comentário: stackoverflow.com/q/8883163/363448
ndequeker

4
Pode não ser ruim aplicar um estilo diferente quando o teclado é aberto, porque a área visível geralmente é mais adequada ao estilo que se aplica ao modo paisagem. Portanto, pode não ser uma chatice.
Muhammad bin Yusrat

Gosto do comentário de Muhammad: se um teclado de software faz com que uma viewport seja mais curta do que larga, a viewport seria, portanto, uma orientação de paisagem (mesmo se você estiver segurando o dispositivo físico normalmente). O CSS está funcionando como pretendido na minha opinião.
Benny

36
@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


1
A orientação depende do dispositivo. Alguns tablets relatam orientação = 0 no modo paisagem. Os iPhones reportam de forma diferente das Samsung Galaxies.
precisa

21

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


4

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


0

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).


É importante observar que o iOS NÃO inverte os valores screen.widthe screen.heightquando o iPhone é girado. Ele sempre informa os mesmos valores. Você deve usar a window.orientationpropriedade para determinar se o dispositivo foi girado ... (o valor será 90 ou -90 para o modo paisagem.)
interDist
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.