Detectar a orientação da porta de visualização, se a orientação for Retrato exibir a mensagem de alerta informando ao usuário as instruções


195

Estou construindo um site especificamente para dispositivos móveis. Há uma página em particular que é melhor visualizada no modo paisagem.

Existe uma maneira de detectar se o usuário que está acessando essa página está no modo Retrato e, se estiver, exibe uma mensagem informando ao usuário que a página é melhor visualizada no modo paisagem? Se o usuário já estiver visualizando no modo paisagem, nenhuma mensagem será exibida.

Então, basicamente, eu quero que o site detecte a orientação da janela de visualização, se a orientação for Retrato e , em seguida, exiba uma mensagem de alerta informando ao usuário que esta página é melhor visualizada no modo Paisagem .

Respostas:


275
if(window.innerHeight > window.innerWidth){
    alert("Please use Landscape!");
}

O jQuery Mobile tem um evento que lida com a alteração dessa propriedade ... se você deseja avisar se alguém gira mais tarde - orientationchange

Além disso, depois de pesquisar no Google, confira window.orientation(que eu acredito medido em graus ...)


6
Não, infelizmente não. No entanto, o seguinte script funcionou: if (window.innerHeight> window.innerWidth) {alert ("Por favor, visualize na paisagem"); }
Dan

8
Eu estava supercomplexando o problema. Isso é ótimo. Tão simples.

76
Em muitos dispositivos, quando o teclado é mostrado, a Largura disponível será maior que a altura, fornecendo incorretamente a orientação paisagem.
Pierre

1
Isso não funciona se combinado com o orientationchangeevento. Ele mostrará a orientação antiga em vez da nova orientação. Esta resposta funciona bem combinada com o orientationchangeevento.
Donald Duck


163

Você também pode usar o window.matchMediaque eu uso e prefiro, pois se assemelha à sintaxe CSS:

if (window.matchMedia("(orientation: portrait)").matches) {
   // you're in PORTRAIT mode
}

if (window.matchMedia("(orientation: landscape)").matches) {
   // you're in LANDSCAPE mode
}

Testado no iPad 2.


3
Suporte para esse recurso é meio fraca, porém: caniuse.com/#feat=matchmedia
Ashitaka

2
No Firefox para Android, funciona corretamente somente após o evento DOM ready.
Inversão

13
O suporte para isso é muito mais forte agora. Esta parece ser uma resposta muito mais robusta agora do que a aceita.
jonk

2
Cuidado com isso com esta solução (link) stackoverflow.com/questions/8883163/…
dzv3

2
Esta é a resposta correta agora. Esse recurso oferece suporte completo a todos os navegadores relevantes.
Telarian 14/02/19

97

David Walsh tem uma abordagem melhor e direta.

// Listen for orientation changes
window.addEventListener("orientationchange", function() {
  // Announce the new orientation number
  alert(window.orientation);
}, false);

Durante essas alterações, a propriedade window.orientation pode mudar. Um valor de 0 significa visualização em retrato, -90 significa que o dispositivo é girado em paisagem para a direita e 90 significa que o dispositivo é girado em paisagem para a esquerda.

http://davidwalsh.name/orientation-change


2
No Nexus 10, e não conheço outros tablets Android 10 ", os valores são invertidos. Ou seja, 0 é retornado quando o dispositivo está em modo paisagem, não em retrato. A resposta de tobyodavies acima parece funcionar bem, embora em todos os dispositivos '' testei
Nathan

8
A orientação 0 é dada para ser a orientação "natural" do dispositivo e, portanto, depende do fornecedor. Poderia ser retrato ou paisagem ...
Pierre

no ipad na iframe fez alguma coisa não alerta
Darius.V

2
Esta não é uma boa solução para a orientação de detecção do dispositivo. Porque eles retornam valor dependem da orientação natural do dispositivo. Exemplo no Samsung vista 7' comprimido retrato retorno 90, mas em nexo 4 para o retrato eles retornam 0.
Dexter_ns88

3
Neste link: notes.matthewgifford.com/… O autor mostra diferentes dispositivos de diferentes fabricantes com diferentes interpretações do que é paisagem e retrato. Daí diferentes valores relatados, nos quais você realmente não pode confiar.
Neon Warge

36

Você pode usar CSS3:

@media screen and (orientation:landscape)
{
   body
   {
      background: red;
   }
}

Melhor resposta para mim, porque você não precisa de um ouvinte para mudar a orientação. Embora eu o combine com modernizr para detectar se é um dispositivo de toque, pois não faz sentido em telas de desktop ou laptop. Ainda não ok para essas telas com capacidades de toque ...
Esger

4
Não está relacionado ao javascript. O OP precisa de solução javascript.
easwee

10
Não, ele quer exibir uma mensagem, você pode usar display: none e display: block para exibir alguma coisa.
Thomas Decaux

2
Como é o suporte para essa verificação de CSS?
ChrisF

1
Não sei, mas não encontrei um celular que não o suporte. Também parece quebrado no Android antigo, quando o teclado aparece às vezes a consulta de mídia é acionada.
Thomas Decaux

20

Existem algumas maneiras de fazer isso, por exemplo:

  • Verificar window.orientationvalor
  • Compare innerHeightvs.innerWidth

Você pode adaptar um dos métodos abaixo.


Verifique se o dispositivo está no modo retrato

function isPortrait() {
    return window.innerHeight > window.innerWidth;
}

Verifique se o dispositivo está no modo paisagem

function isLandscape() {
    return (window.orientation === 90 || window.orientation === -90);
}

Exemplo de uso

if (isPortrait()) {
    alert("This page is best viewed in landscape mode");
}

Como detecto a mudança de orientação?

$(document).ready(function() {
    $(window).on('orientationchange', function(event) {
        console.log(orientation);
    });
});

10

Eu acho que a solução mais estável é usar a tela em vez da janela, porque pode ser tanto paisagem quanto retrato se você redimensionar a janela do navegador no computador desktop.

if (screen.height > screen.width){
    alert("Please use Landscape!");
}

Isso funciona no IE 10, Firefox 23 e Chrome 29 (todos os navegadores de desktop).
Jakob Jenkov 28/09

1
Todos os principais navegadores são compatíveis. IE 7 também
artnikpro


@Duncan No. Ele funciona no celular. É um método bastante antigo e é suportado em navegadores antigos de safari e android. Pode não ser muito preciso com retina, mas para a detecção de orientação viewport ele deve funcionar bem
artnikpro

1
@artnikpro Eu testei ontem e parece que o Safari retorna as dimensões físicas da tela, negligenciando a orientação. Portanto, screen.width é sempre a largura física da tela.
Duncan Hoggan

9

Para aplicar todos esses ótimos comentários à minha codificação diária, para continuidade entre todos os meus aplicativos, decidi usar o seguinte no meu código móvel jquery e jquery.

window.onresize = function (event) {
  applyOrientation();
}

function applyOrientation() {
  if (window.innerHeight > window.innerWidth) {
    alert("You are now in portrait");
  } else {
    alert("You are now in landscape");
  }
}


5

Após algumas experiências, descobri que a rotação de um dispositivo com reconhecimento de orientação sempre aciona o resizeevento de uma janela do navegador . Portanto, em seu manipulador de redimensionamento, basta chamar uma função como:

function is_landscape() {
  return (window.innerWidth > window.innerHeight);
}

1
Veja acima porque 90 => paisagem não é algo em que você pode confiar em diferentes dispositivos.
ChrisF

5

Combinei duas soluções e funciona bem para mim.

window.addEventListener("orientationchange", function() {                   
    if (window.matchMedia("(orientation: portrait)").matches) {
       alert("PORTRAIT")
     }
    if (window.matchMedia("(orientation: landscape)").matches) {
      alert("LANSCAPE")
     }
}, false);

5

Discordo da resposta mais votada. Use screene nãowindow

    if(screen.innerHeight > screen.innerWidth){
    alert("Please use Landscape!");
}

É a maneira correta de fazer isso. Se você calcular comwindow.height , terá problemas no Android. Quando o teclado está aberto, a janela diminui. Então use a tela em vez da janela.

A screen.orientation.typeé uma boa resposta, mas com o IE. https://caniuse.com/#search=screen.orientation


4

Obtenha a orientação (a qualquer momento no seu código js) via

window.orientation

Quando window.orientationretorna 0ou 180você está no modo retrato , ao retornar 90ou 270então no modo paisagem .


1
Porém, ele não retorna 270, mas retorna -90.
Felipe Correa

@FelipeCorrea A resposta tem 2 anos!
Sliq

2
Eu estava esclarecendo para torná-lo válido para novos visitantes. Isso me ajudou entre.
Felipe Correa

window.orientation está obsoleto
Jonny

4

Apenas CCS

@media (max-width: 1024px) and (orientation: portrait){ /* tablet and smaller */
  body:after{
    position: absolute;
    z-index: 9999;
    width: 100%;
    top: 0;
    bottom: 0;
    content: "";
    background: #212121 url(http://i.stack.imgur.com/sValK.png) 0 0 no-repeat; /* replace with an image that tells the visitor to rotate the device to landscape mode */
    background-size: 100% auto;
    opacity: 0.95;
  }
}

Em alguns casos, convém adicionar um pequeno pedaço de código para recarregar a página depois que o visitante girou o dispositivo, para que o CSS seja renderizado corretamente:

window.onorientationchange = function() { 
    var orientation = window.orientation; 
        switch(orientation) { 
            case 0:
            case 90:
            case -90: window.location.reload(); 
            break; } 
};

1
Eu sei que não devo, mas tive que agradecer por isso, é uma ótima solução.
FalsePozitive 30/08/19


2
//see also http://stackoverflow.com/questions/641857/javascript-window-resize-event
//see also http://mbccs.blogspot.com/2007/11/fixing-window-resize-event-in-ie.html
/*
Be wary of this:
While you can just hook up to the standard window resize event, you'll find that in IE, the event is fired once for every X and once for every Y axis movement, resulting in a ton of events being fired which might have a performance impact on your site if rendering is an intensive task.
*/

//setup 
window.onresize = function(event) {
    window_resize(event);
}

//timeout wrapper points with doResizeCode as callback
function window_resize(e) { 
     window.clearTimeout(resizeTimeoutId); 
     resizeTimeoutId = window.setTimeout('doResizeCode();', 10); 
}

//wrapper for height/width check
function doResizeCode() {
    if(window.innerHeight > window.innerWidth){
        alert("Please view in landscape");
    }
}

2

Outra alternativa para determinar a orientação, com base na comparação da largura / altura:

var mql = window.matchMedia("(min-aspect-ratio: 4/3)");
if (mql.matches) {
     orientation = 'landscape';
} 

Você o usa no evento "redimensionar":

window.addEventListener("resize", function() { ... });

2

O iOS não é atualizado screen.widthe screen.heightquando a orientação muda. O Android não é atualizado window.orientationquando muda.

Minha solução para esse problema:

var isAndroid = /(android)/i.test(navigator.userAgent);

if(isAndroid)
{
    if(screen.width < screen.height){
        //portrait mode on Android
    }
} else {
    if(window.orientation == 0){
        //portrait mode iOS and other devices
    }
}

Você pode detectar essa alteração na orientação no Android e no iOS com o seguinte código:

var supportsOrientationChange = "onorientationchange" in window,
    orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";

window.addEventListener(orientationEvent, function() {
    alert("the orientation has changed");
}, false);

Se o onorientationchangeevento não for suportado, o evento vinculado será o resizeevento.


2

Se você possui os navegadores mais recentes, window.orientationpode não funcionar. Nesse caso, use o código a seguir para obter o ângulo -

var orientation = window.screen.orientation.angle;

Ainda é uma tecnologia experimental, você pode verificar a compatibilidade do navegador aqui


1

Obrigado a tobyodavies por guiar o caminho.

Para obter uma mensagem de alerta com base na orientação do dispositivo móvel, é necessário implementar o seguinte script no diretório function setHeight() {

if(window.innerHeight > window.innerWidth){
    alert("Please view in landscape");
}

1

Em vez de 270, pode ser -90 (menos 90).


1

Isso se expande em uma resposta anterior. A melhor solução que encontrei é criar um atributo CSS inócuo que só aparece se uma consulta de mídia CSS3 for atendida e fazer o teste JS para esse atributo.

Por exemplo, no CSS, você teria:

@media screen only and (orientation:landscape)
{
    //  Some innocuous rule here
    body
    {
        background-color: #fffffe;
    }
}
@media screen only and (orientation:portrait)
{
    //  Some innocuous rule here
    body
    {
        background-color: #fffeff;
    }
}

Você então acessa o JavaScript (estou usando o jQuery para diversão). As declarações de cores podem ser estranhas, então você pode querer usar outra coisa, mas esse é o método mais infalível que eu encontrei para testá-lo. Você pode usar o evento de redimensionamento para ativar a alternância. Coloque tudo junto para:

function detectOrientation(){
    //  Referencing the CSS rules here.
    //  Change your attributes and values to match what you have set up.
    var bodyColor = $("body").css("background-color");
    if (bodyColor == "#fffffe") {
        return "landscape";
    } else
    if (bodyColor == "#fffeff") {
        return "portrait";
    }
}
$(document).ready(function(){
    var orientation = detectOrientation();
    alert("Your orientation is " + orientation + "!");
    $(document).resize(function(){
        orientation = detectOrientation();
        alert("Your orientation is " + orientation + "!");
    });
});

A melhor parte disso é que, ao escrever esta resposta, ela não parece ter efeito nas interfaces da área de trabalho, pois elas (geralmente) não (parecem) passam nenhum argumento para orientação à página.


Como uma observação, o Windows 10 e o Edge podem estar lançando uma chave para isso - ainda não testei substancialmente a nova plataforma, mas pelo menos inicialmente, parece que ele pode estar fornecendo dados de orientação ao navegador. Ainda é possível criar seu site em torno dele, mas é definitivamente algo para estar ciente.
18119 Josh C

1

Aqui está o melhor método que encontrei, com base no artigo de David Walsh ( Detectar alterações de orientação em dispositivos móveis )

if ( window.matchMedia("(orientation: portrait)").matches ) {  
   alert("Please use Landscape!") 
}

Explicação:

Window.matchMedia () é um método nativo que permite definir uma regra de consulta de mídia e verificar sua validade a qualquer momento.

Acho útil anexar um onchangeouvinte ao valor de retorno desse método. Exemplo:

var mediaQueryRule = window.matchMedia("(orientation: portrait)")
mediaQueryRule.onchange = function(){ alert("screen orientation changed") }

1

Eu usei no Android Chrome "A API de orientação da tela"

Para procurar a orientação atual, chame console.log (screen.orientation.type) (e talvez screen.orientation.angle).

Resultados: retrato-primário | retrato-secundário | paisagem primária | paisagem secundária

Abaixo está o meu código, espero que seja útil:

var m_isOrientation = ("orientation" in screen) && (typeof screen.orientation.lock == 'function') && (typeof screen.orientation.unlock == 'function');
...
if (!isFullscreen()) return;
screen.orientation.lock('landscape-secondary').then(
    function() {
        console.log('new orientation is landscape-secondary');
    },
    function(e) {
        console.error(e);
    }
);//here's Promise
...
screen.orientation.unlock();
  • Testei apenas para o Android Chrome - ok

1
screen.orientation.addEventListener("change", function(e) {
 console.log(screen.orientation.type + " " + screen.orientation.angle);
}, false);

Embora esse trecho de código possa resolver a questão, incluir uma explicação realmente ajuda a melhorar a qualidade da sua postagem. Lembre-se de que você está respondendo à pergunta dos leitores no futuro e essas pessoas podem não saber os motivos da sua sugestão de código. Tente também não sobrecarregar seu código com comentários explicativos, pois isso reduz a legibilidade do código e das explicações!
Adeus StackExchange

Esta resposta não resolve o problema na pergunta original. Ele mostra como registrar alterações de orientação, mas não mostra como exibir uma mensagem apenas em uma orientação específica.
Julian

1

O objeto de janela em JavaScript em dispositivos iOS possui uma propriedade de orientação que pode ser usada para determinar a rotação do dispositivo. A seguir, são mostrados os valores window.orientation para dispositivos iOS (por exemplo, iPhone, iPad, iPod) em diferentes orientações.

Esta solução também funciona para dispositivos Android também. Fiz o check-in no navegador nativo do Android (navegador da Internet) e no navegador Chrome, mesmo nas versões antigas.

function readDeviceOrientation() {                      
    if (Math.abs(window.orientation) === 90) {
        // Landscape
    } else {
        // Portrait
    }
}

1

É isso que eu uso.

function getOrientation() {

    // if window.orientation is available...
    if( window.orientation && typeof window.orientation === 'number' ) {

        // ... and if the absolute value of orientation is 90...
        if( Math.abs( window.orientation ) == 90 ) {

              // ... then it's landscape
              return 'landscape';

        } else {

              // ... otherwise it's portrait
              return 'portrait';

        }

    } else {

        return false; // window.orientation not available

    }

}

Implementação

window.addEventListener("orientationchange", function() {

     // if orientation is landscape...
     if( getOrientation() === 'landscape' ) {

         // ...do your thing

    }

}, false);

0
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Rotation Test</title>
  <link type="text/css" href="css/style.css" rel="stylesheet"></style>
  <script src="js/jquery-1.5.min.js" type="text/javascript"></script>
  <script type="text/javascript">
        window.addEventListener("resize", function() {
            // Get screen size (inner/outerWidth, inner/outerHeight)
            var height = $(window).height();
            var width = $(window).width();

            if(width>height) {
              // Landscape
              $("#mode").text("LANDSCAPE");
            } else {
              // Portrait
              $("#mode").text("PORTRAIT");
            }
        }, false);

  </script>
 </head>
 <body onorientationchange="updateOrientation();">
   <div id="mode">LANDSCAPE</div>
 </body>
</html>

0

Existe uma maneira de detectar se o usuário passou o dispositivo para o modo retrato usando screen.orientation

Basta usar o código abaixo:

screen.orientation.onchange = function () {
     var type = screen.orientation.type;
     if (type.match(/portrait/)) {
         alert('Please flip to landscape, to use this app!');
     }
}

Agora, onchangeserá acionado sempre que o usuário virar o dispositivo e o alerta será exibido quando o usuário estiver usando o modo retrato.


0

Uma coisa a observar window.orientationé que ele retornará undefinedse você não estiver em um dispositivo móvel. Portanto, uma boa função para verificar a orientação pode ser assim, onde xé window.orientation:

//check for orientation
function getOrientation(x){
  if (x===undefined){
    return 'desktop'
  } else {
    var y;
    x < 0 ? y = 'landscape' : y = 'portrait';
    return y;
  }
}

Chame assim:

var o = getOrientation(window.orientation);
window.addEventListener("orientationchange", function() {
  o = getOrientation(window.orientation);
  console.log(o);
}, false);

0

Ou você pode simplesmente usar isso ..

window.addEventListener("orientationchange", function() {
    if (window.orientation == "90" || window.orientation == "-90") {
        //Do stuff
    }
}, false);
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.