Detecta a orientação da janela de exibição, se a orientação for uma mensagem de alerta de exibição de retrato, aconselhando o usuário sobre as instruções

Eu 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á visitando essa página está visualizando-o no modo Retrato e, em caso afirmativo, exibir uma mensagem informando ao usuário que a página é melhor visualizada no modo paisagem? Se o usuário já estiver visualizando-o no modo paisagem, nenhuma mensagem será exibida.

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

Muito obrigado, Dan

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

    jQuery Mobile tem um evento que manipula a mudança desta propriedade … se você quiser avisar se alguém rodar mais tarde – orientationchangechange

    Além disso, depois de alguns googling, confira window.orientation (que eu acredito medido em graus …

    Você também pode usar window.matchMedia , que eu uso e prefiro como se assemelha a syntax 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.

    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 ser alterada. Um valor de 0 significa visualização em retrato, -90 significa que o dispositivo é girado para a paisagem à direita e 90 significa que o dispositivo é girado para a esquerda.

    http://davidwalsh.name/orientation-change

    Você pode usar CSS3:

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

    Existem algumas maneiras de fazer isso, por exemplo:

    • Verifique o valor de window.orientation
    • Comparar innerHeight vs. innerWidth

    Você pode adaptar um dos methods 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 faço para detectar a mudança de orientação?

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

    Acho que a solução mais estável é usar a canvas em vez da janela, porque ela pode ser tanto paisagem quanto retrato se você resize a janela do navegador no computador de mesa.

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

    Para aplicar todos esses ótimos comentários à minha codificação diária, para continuidade entre todos os meus aplicativos, decidi usar o seguinte em 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"); } } 

    Não tente consultas de window.orientation fixas (0, 90 etc não significa retrato, paisagem etc):

    http://www.matthewgifford.com/blog/2011/12/22/a-misconception-about-window-orientation/

    Mesmo no iOS7 dependendo de como você entra no navegador 0 nem sempre é retrato

    Após algumas experiências, descobri que a rotação de um dispositivo de orientação consciente sempre aciona o evento de resize uma janela do navegador. Então, no seu manipulador de redimensionamento, simplesmente chame uma function como:

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

    Eu 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); 

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

     window.orientation 

    Quando window.orientation retorna 0 ou 180 , você está no modo retrato , ao retornar 90 ou 270 , você está no modo paisagem .

    Não concordo com a resposta mais votada. Use a screen e não a window

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

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

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

     //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"); } } 

    Outra alternativa para determinar a orientação, baseada 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 “resize”:

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

    O iOS não atualiza screen.width & screen.height quando a orientação muda. O Android não atualiza window.orientation quando é alterado.

    Minha solução para este 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 mudança de 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 evento onorientationchange não for suportado, o evento ligado será o evento de resize .

     $(window).on("orientationchange",function( event ){ alert(screen.orientation.type) }); 

    Graças a tobyodavies para orientar o caminho.

    Para obter uma mensagem de alerta baseada na orientação do dispositivo móvel, você precisa implementar o seguinte script dentro da function setHeight() {

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

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

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

    Então, 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 vai para JavaScript (estou usando o jQuery para funsies). Declarações de colors podem ser estranhas, então você pode querer usar outra coisa, mas este é o método mais infalível que eu encontrei para testá-lo. Você pode então usar o evento de redimensionamento para pegar na troca. 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, no momento em que escrevo esta resposta, ela não parece ter nenhum efeito nas interfaces de desktop, já que elas (geralmente) não (parecem) passar qualquer argumento pela orientação para a página.

    Aqui está o melhor método que encontrei, baseado no artigo de David Walsh ( Detectar mudança 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.

    Eu acho útil append um ouvinte onchange no valor de retorno desse método. Exemplo:

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

    Eu usei para o Android Chrome “The Screen Orientation API”

    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(); 
    • Eu testei apenas para o Android Chrome – ok
     screen.orientation.addEventListener("change", function(e) { console.log(screen.orientation.type + " " + screen.orientation.angle); }, false); 

    O object da janela em JavaScript em dispositivos iOS tem uma propriedade de orientação que pode ser usada para determinar a rotação do dispositivo. O seguinte mostra 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. Eu verifiquei no navegador nativo do Android (navegador de Internet) e no navegador Chrome, mesmo nas versões antigas do mesmo.

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

    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://sofpt.miximages.com/javascript/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, você pode querer 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; } }; 

    Isso é o 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); 
       Rotation Test      
    LANDSCAPE

    Existe uma maneira pela qual você pode detectar se o usuário screen.orientation 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, o onchange será acionado sempre que o usuário virar o dispositivo e o alerta aparecer quando o usuário estiver usando o modo retrato.

    Uma coisa a observar sobre window.orientation é que ele retornará undefined se você não estiver em um dispositivo móvel. Portanto, uma boa function 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); 

    Ou você poderia apenas usar isso

     window.addEventListener("orientationchange", function() { if (window.orientation == "90" || window.orientation == "-90") { //Do stuff } }, false);